如何用ClaudeCode做精美UI用ClaudeCode做UI页面攻略如何用C

如何用ClaudeCode做精美UI用ClaudeCode做UI页面攻略

如何用Claude Code做“产品级”UI页面？码住这份详细攻略。

博主hi大雄总结了一套5步工作流，教你用Claude Code制作精美的UI前端，图文并茂，还开源了GitHub源码。

他总结的5步工作流包括：

1. 复制UI上下文：包括网页截图、html/css结构、原始样式；

2. 迭代原始UI：用高规格提示词控制字体、阴影、交互等细节；

3. 生成STYLE.md：把样式抽象成风格指南，供Claude调用；

4. 构建原型html：先用html打底，再不断迭代调细节；

5. 像素级还原Next App：通过Claude生成结构清晰、还原度高的项目工程。

Demo体验地址：4-quadrant-to-do.vercel.app/

原文：juejin.cn/post/7569777676098814002

GitHub：github.com/1111-stu/4-quadrant-to-do