Claude-Code-Design-AI
mikesheehan54 · mikesheehan54/Claude-Code-Design-AI
Một framework UI/UX và plugin cho Claude Code giúp tạo các thành phần React và Tailwind CSS từ thiết kế, hỗ trợ tạo mẫu và hệ thống thiết kế.
Claude Design: AI UI/UX architect. Screenshot to React, Figma components, Tailwind CSS generator. Prototyping agent, design systems, wireframe renderer. SVG icon creator, dark mode toggle, responsive layout tool. Front-end code export, shadcn/ui integration, vector assets, branding assistant.
Xem trước
Bạn có thể làm gì với nó
- Tạo các thành phần React và Tailwind CSS từ các thiết kế UI/UX trong Claude Code.
- Tạo mẫu giao diện mới nhanh chóng bằng các hệ thống thiết kế được hỗ trợ bởi AI.
- Chuyển đổi ảnh chụp màn hình thành mã frontend có thể chỉnh sửa với khả năng thiết kế của Claude Code.
Kiểm tra an toàn
Không thấy dấu hiệu rủi ro trong các file đã quét.
Quét tự động các file trong repo. Luôn xem lại code trước khi chạy.
Trích từ README
Claude Design Free
<strong>Sophisticated UI/UX Framework for Anthropic-Based AI Applications</strong>
Bridging the gap between advanced reasoning and elegant, human-centric interface design.
简体中文 | Report Bug | Discussions
Quick Start
Download ClaudeDesign.zip
Overview
Claude Design is an elite, open-source design system and UI library specifically crafted for applications powered by Claude-series models. It prioritizes clarity, low cognitive load, and aesthetic harmony, providing developers with the tools to build "Artifacts-style" experiences with high-performance rendering.
[!Important]
This system is optimized for React 18+ and Tailwind CSS. It includes built-in hooks for Anthropic's Messages API to handle streaming UI states gracefully.
Key Features
- Semantic Typography: Custom-tuned font scales for maximum readability during long-form AI reasoning.
- Artifacts UI Engine: Ready-to-use components for code blocks, interactive charts, and real-time previews.
- Stream-Ready Components: Specialized loading states and "typing" animations that sync with Claude's token output.
- Privacy-First Rendering: Sanitized Markdown and LaTeX rendering to ensure safe display of AI-generated content.
- Adaptive Color Theory: A sophisticated palette that shifts based on "AI Confidence" levels and user intent.
- Responsive Mastery: Mobile-first layouts optimized for complex chat-based workflows.
Technical Stack
- Core: TypeScript / React 18 / Vite
- Styling: Tailwind CSS / Framer Motion (for fluid AI transitions)
- Icons: Lucide React / Custom Anthropic-style glyphs
- API Integration: Compatible with
@anthropic-ai/sdk