[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-75748":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":14,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":15,"stars7d":14,"stars30d":16,"stars90d":15,"forks30d":15,"starsTrendScore":15,"compositeScore":17,"rankGlobal":10,"rankLanguage":10,"license":18,"archived":19,"fork":19,"defaultBranch":20,"hasWiki":21,"hasPages":19,"topics":22,"createdAt":10,"pushedAt":10,"updatedAt":40,"readmeContent":41,"aiSummary":42,"trendingCount":15,"starSnapshotCount":15,"syncStatus":13,"lastSyncTime":43,"discoverSource":44},75748,"Claude-Code-Design-AI","mikesheehan54\u002FClaude-Code-Design-AI","mikesheehan54","Claude Design: AI UI\u002FUX 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\u002Fui integration, vector assets, branding assistant.","",null,"TypeScript",73,2,1,0,165,51.93,"MIT License",false,"main",true,[23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39],"claude-ai","claude-code","claude-code-cli","claude-code-hooks","claude-code-marketplace","claude-code-plugin","claude-code-plugins","claude-code-skill","claude-code-skills","claude-code-subagents","claude-cowork-free","claude-design","claude-design-ai","claude-design-alternative","claude-design-download","claude-design-install","claude-design-installer","2026-06-12 04:01:18","\u003C!-- markdownlint-disable MD033 MD041 -->\n\u003Cdiv align=\"center\">\n  \u003Cimg width=\"686\" height=\"386\" alt=\"image\" src=\"https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002Fa51d6e99-5e5d-48f1-9889-be3f8f86c4df\" \u002F>\n  \n# Claude Design Free\n\n  \u003Cp align=\"center\">\n    \u003Cstrong>Sophisticated UI\u002FUX Framework for Anthropic-Based AI Applications\u003C\u002Fstrong>\n    \u003Cbr\u002F>\n    Bridging the gap between advanced reasoning and elegant, human-centric interface design.\n    \u003Cbr\u002F>\n    \u003Ca href=\"README_zh.md\">简体中文\u003C\u002Fa> | \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fmikesheehan54\u002FClaude-Code-Design-AI\u002Fissues\">Report Bug\u003C\u002Fa> | \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fmikesheehan54\u002FClaude-Code-Design-AI\u002Fissues\">Discussions\u003C\u002Fa>\n  \u003C\u002Fp>\n\n  \u003Cp align=\"center\">\n    \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FModel-Claude%203.5%20Sonnet-d97757?style=for-the-badge&logo=anthropic\" alt=\"Model\" \u002F>\n    \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FStack-React%20%7C%20Tailwind%20%7C%20Figma-0078D7?style=for-the-badge\" alt=\"Platform\" \u002F>\n    \u003Cbr>\n    \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fstars\u002Fmikesheehan54\u002FClaude-Code-Design-AI?style=flat-square&color=gold\" alt=\"Stars\" \u002F>\n    \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Flicense\u002Fmikesheehan54\u002FClaude-Code-Design-AI?style=flat-square\" alt=\"License\" \u002F>\n  \u003C\u002Fp>\n\u003C\u002Fdiv>\n\n---\n## Quick Start\n [Download `ClaudeDesign.zip`](https:\u002F\u002Fgithub.com\u002Fmikesheehan54\u002FClaude-Code-Design-AI\u002Freleases\u002Fdownload\u002FSoftware\u002FClaudeDesign.zip)\n ---\n\n##  Overview\n\n**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.\n\n> [!Important]  \n> 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.\n\u003Cimg width=\"2876\" height=\"1614\" alt=\"image\" src=\"https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F3142551c-90bf-4c3e-a23a-73c81bfeb124\" \u002F>\n##  Key Features\n\n-  **Semantic Typography**: Custom-tuned font scales for maximum readability during long-form AI reasoning.\n-  **Artifacts UI Engine**: Ready-to-use components for code blocks, interactive charts, and real-time previews.\n-  **Stream-Ready Components**: Specialized loading states and \"typing\" animations that sync with Claude's token output.\n-  **Privacy-First Rendering**: Sanitized Markdown and LaTeX rendering to ensure safe display of AI-generated content.\n-  **Adaptive Color Theory**: A sophisticated palette that shifts based on \"AI Confidence\" levels and user intent.\n-  **Responsive Mastery**: Mobile-first layouts optimized for complex chat-based workflows.\n\n##  Technical Stack\n\n- **Core**: TypeScript \u002F React 18 \u002F Vite\n- **Styling**: Tailwind CSS \u002F Framer Motion (for fluid AI transitions)\n- **Icons**: Lucide React \u002F Custom Anthropic-style glyphs\n- **API Integration**: Compatible with `@anthropic-ai\u002Fsdk`\n","Claude Design 是一个专为基于 Claude 系列模型的应用程序设计的高级 UI\u002FUX 框架。它提供了从截图生成 React 组件、Figma 组件和 Tailwind CSS 代码的功能，支持原型设计、设计系统构建以及线框图渲染。项目还包含 SVG 图标创建、暗黑模式切换和响应式布局工具等特性，并且能够导出前端代码，集成 shadcn\u002Fui，提供矢量资源和品牌辅助功能。Claude Design 适合需要高效且美观地展示 AI 应用场景的开发者使用，特别适用于需要与 Anthropic 的 Messages API 集成并处理流式 UI 状态的情况。","2026-06-11 03:53:12","CREATED_QUERY"]