Coderick AI 导入设计：把 Claude Design 或 Google Stitch 的设计稿变成能用的网站/应用

现在，用 Coderick AI 的「导入设计」（Import Design）功能，你可以把 Claude Design 或 Google Stitch 里的一份设计直接带进 Coderick，变成一个功能完整的网站或网页应用。

把导出的文件传上去，Coderick 会保留你的版式、配色和内容，然后补上设计稿自己做不到的那些事：能真正提交、能保存数据的表单，一个数据库，以及背后把它们全部串起来的后端。这样一来，你的设计就能作为一个真正可用、别人能访问的站点上线，而不只是停在"看起来像那么回事"的阶段。

「导入设计」在 Coderick AI 的每一个套餐上都提供，不额外收费，连免费试用也能用。

什么时候适合用「导入设计」开一个新项目

当你的想法已经在 Claude Design 或 Google Stitch 里做成了设计稿，但它还什么都干不了时，就该用「导入设计」。它尤其适合这几类人：

• 已经把网站样子画好、想让它真正上线的企业主——尤其是需要表单能收集并保存客户咨询的那种。
• 手上有一份客户已经拍板的设计稿、又不想每个页面都手写代码的自由职业者和工作室。
• 已经有了应用原型、想做出第一个能拿给真实用户试用版本的创始人和团队。

如果你本来就从设计工具起步，那么就不必再把头几条提示词都花在"每个页面该长什么样"上了——Coderick 已经从你的导出文件里拿到了这些信息，你可以把精力集中在"这个站点或应用到底要做什么"上。

需要注意一点：「导入设计」是用一整份设计导出来开一个新项目的。如果你只是想往一个已有项目里加单个页面、组件或样式表，请改用对话里的文件上传功能（参考《Coderick AI 支持文件上传：把已有的 HTML/CSS/JS 代码直接带进对话》）。

Coderick AI 如何把设计稿变成带后端的网站或应用

一份 Claude Design 或 Google Stitch 项目能准确呈现你的站点或应用长什么样，但它自己跑不起来。就算你能一个页面一个页面点着看，表单也不会保存别人填的内容，什么都不会被存下来，更没有一个能让别人访问的网址。

导入项目后，Coderick 会逐一过一遍你导出文件里的每个页面，尽可能贴近原样地保留你的版式、配色、字体和内容。接着它会看你的按钮、表单和链接，判断每一个应该做什么，并把让它们真正工作所需的东西全都搭出来：每个操作背后的逻辑、用来存信息的数据库，以及把这一切连接起来的后端。

举个例子：假设你在 Claude Design 里给一家保洁公司做了个网站，上面有一个"获取报价"表单。在设计稿里，它只是长得像个表单而已；导入之后，它就变成了一个真正的表单——每一条报价请求都会被存进数据库，访客提交之后还能看到一条确认信息。

从预填好的提示词开始

每次导入都会自带一条预填提示词，告诉 Coderick 保留你的设计，并把它做成一个功能完整、能自适应各种屏幕的版本。既然你的设计已经把"要搭什么"讲清楚了，做出第一个版本通常有这条提示词就够了。真正值得你动手补充的，只有那些设计稿表达不出来的东西，比如额外加一个页面，或者别人提交表单之后应该发生什么。

第一版之后，继续搭建

第一个版本做好后，Coderick 会根据你的项目推荐一些有用的补充，比如一块客户评价区，或者一个后台管理面板。把想要的加上（如果需要的话），剩下的就照你在任何其它 Coderick AI 项目里的老办法慢慢打磨：

• 在对话里一次提一个需求，逐步加功能。
• 用「可视化编辑」（Visual Edit）调整外观——具体玩法可以看《Coderick AI 新增可视化编辑与 AI 图片生成》。
• 打开「代码」（Code）标签页，查看每一个文件。
• 哪次改动不满意，就回退到更早的版本。

如何把你的设计文件导入 Coderick AI

1. 导出你的设计。 在 Claude Design 里点「Share（分享）」，把设计导出成一个 ZIP 或单个 HTML 文件；在 Google Stitch 里点「Export（导出）」，选中你想放进应用里的每个页面，存成 ZIP。请记住：只有在导出文件里的页面才会被导入。
2. 新建一个项目。 你可以从 Coderick AI 页面开始；如果你是 SiteGround 的客户，也可以在用户中心（User Area）里点 Websites > Coderick Projects 下的「New（新建）」。
3. 选择「Import（导入）」并上传文件。 点 Build 和 Rebuild 旁边的「Import」，选择 Claude Design 或 Google Stitch，然后上传你导出的设计文件（最大 20 MB）。
4. 检查提示词。 保留预填的那条，或者补上你自己的细节，然后点箭头提交。
5. 让 Coderick 去搭。 新项目打开后 Coderick 就开始搭建，你可以在对话里跟进进度；搭好后，你的应用会出现在预览区里。
6. 发布你的应用。 满意之后，一键发布即可。每个付费套餐都已包含 SiteGround 的高级托管，附带免费 SSL 证书、CDN、备份、智能防火墙和 AI 爬虫防护。想给应用一个专属网址，就绑定一个你自己拥有的域名。如果你正在用免费套餐或试用，准备好发布时升级即可。

每个工具更详细的导出步骤，可以看官方完整指南：《如何把 Claude 或 Google Stitch 的设计导入 Coderick AI》。

设计你已经做好了，现在把它变成一个别人能访问、能使用的东西吧：导入 Coderick AI，补上它需要的功能，再随着项目成长不断优化。第一次接触 Coderick AI？可以免费开始动手搭。