ai-atelie
一个开源、本地优先的AI设计工作室，用于协作生成前端代码。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：ai-atelie。 它的用途是：一个开源、本地优先的AI设计工作室，用于协作生成前端代码。 完整的 Skill 内容见：https://321skill.com/skills/ai-atelie/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“创建一个带有深色主题、居中对齐标题和卡片网格布局的登录页面。” AI会在你的项目文件夹中生成相应的HTML和CSS代码，并实时在右侧画布中渲染出效果。你可以继续对话，例如说：“把卡片的圆角调大一些，并添加悬停阴影效果。” AI会直接修改源代码文件，实现你的要求。
介绍
AI Atelier 解决了开发者在利用AI进行前端设计时遇到的痛点：主流AI设计工具（如Claude Design）通常是封闭的云端服务，设计过程无法版本控制，无法脱离聊天上下文进行迭代，也无法集成自定义的AI代理。它让前端设计的协作回归到代码本身。
使用方式非常直观：它是一个本地运行的Web应用。用户创建一个项目文件夹，其中包含原始的HTML、JSX或CSS文件。在浏览器中打开AI Atelier编辑器，左侧是与AI代理的聊天侧边栏，右侧是实时预览画布。你可以通过自然语言向AI描述设计需求，AI会直接修改项目文件夹中的源代码，所有修改都实时反映在预览中。
它非常适合前端开发者、全栈工程师、产品设计师以及任何需要快速原型设计或与AI协作编写前端代码的创作者。尤其是那些重视代码所有权、希望将AI设计过程纳入现有Git工作流，或希望使用特定AI模型（如本地部署的模型）的团队。
与Claude Design等闭源云端工具相比，AI Atelier的核心区别在于其开源、本地优先和以代码为中心的理念。它不是一个将设计“锁定”在特定平台的黑盒服务，而是一个将AI对话、设计草稿和最终产出都作为可编辑、可版本控制的纯文本文件来管理的工具。你可以完全掌控设计产物的每一个字节，并自由选择与之协作的AI代理。
核心特点
作为Anthropic Claude Design的开源替代品，AI Atelier将设计过程完全本地化、代码化，允许用户使用自定义的AI代理，并将所有设计产物（代码、对话、技能）都保存在可版本控制的文件夹中，实现了真正的所有权和可迭代性。
注意事项
不适合追求“一键生成”完整应用、希望完全脱离代码进行纯视觉设计的非技术用户。
常见问题
AI Atelier和Claude Design有什么区别？
AI Atelier是开源、本地优先的工具，设计产物是纯代码文件，可版本控制，且支持自定义AI代理；Claude Design是闭源的云端服务，设计过程与聊天绑定，产物不易导出和迭代。
需要编程基础才能使用吗？
是的，它本质上是一个与AI协作编写HTML/JSX/CSS代码的工具，需要对前端代码有基本理解才能有效使用和修改AI的产出。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/ai-atelie/raw/index.md 读取 ai-atelie 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/ai-atelie/raw/index.md（查看排版版本）