Claude Code的各种用法和教程实战，但都围绕着开发相关的功能，差点忘了我是一名产品经理，用Claude Code来画原型才是我该干的活啊！
于是我决定测试让Claude Code设计一个《答案之书》小程序界面。
第一次尝试：使用简单提示词我要做一个《答案之书》小程序
几秒钟后，Claude Code果然很快生成了一个界面……只能说，速度够快，但审美嘛——不丑，也谈不上好看，以现在产品原型的话术来说这就是AI低真保水平。
但我知道，这不是AI的问题，而是提示词的问题。
产品设计提示词系统
从“能用”到“好看”之间，只差一个提示词，如何打造一套产品设计提示词系统：让Claude Code拥有大师级审美！
经过深入研究和实践，我开发了一套专门针对前端页面设计的智能提示词系统——"产品设计提示词系统"。这套系统的核心理念是：通过结构化的多轮对话，收集充分的设计上下文，然后基于专业设计规范产出高质量的视觉方案。
接下来先分享这套提示词系统核心特性：
大师角色定位
-
不仅是执行者，更是拥有独特设计哲学的创作者
-
具备像素级完美的审美追求
-
能够将用户模糊想法升华为清晰设计理念
-
像资深设计导师般引导用户完成创作
技术规范内化
-
现代网页设计最佳实践
-
完整的设计系统规范（字体、色彩、布局、响应式等）
-
设备模拟与外框适配
-
无障碍设计标准
五大设计哲学
-
光影与深度 —— 创造可触摸的空间层次
-
韵律与秩序 —— 让留白和间距会呼吸
-
情感与色彩 —— 用颜色讲述产品故事
-
生命力与反馈 —— 让交互充满惊喜
-
信息的故事性 —— 引导而非平铺直叙
核心提示词架构解析
四阶段工作流程
阶段一：需求挖掘与理解
-
通过对话式交互深入了解产品背景
-
确认产品类型、用户画像、核心功能
-
收集参考灵感和设计偏好
阶段二：设计语言探索
-
基于第一阶段信息动态生成设计方向
-
提供2-3个差异化的视觉风格概念
-
每个概念包含创意命名和适配理由
阶段三：技术规格与设计系统确立
-
明确技术实现要求
-
建立统一的设计系统基础
-
确立创作心法与设计哲学
阶段四：设计产出与迭代
-
生成多个完整的设计方案
-
提供设计理念说明和系统拆解
-
支持快速迭代和风格调整
关键技术实现
<body class="device-simulation">
<div class="mobile-frame">
</div>
</body>核心技术栈：
-
HTML5语义化标签
-
TailwindCSS（CDN引入）
-
Font Awesome图标库
-
Google Fonts字体库
-
响应式设计框架
实战效果测试
接下来，我来和你分享如何使用产品设计提示词系统+Claude Code产出高质量的页面样式设计。
这套提示词的设计逻辑：
AI跟人如何交互？
-
多轮对话才能输出更接近真实需求的作品
-
不是一句话生成结果，而是“共同完成一场设计创作”
提示词最终要产出什么？
-
一套视觉风格明确、页面结构合理、可以预览和复用的HTML原型代码
-
多个备选方案供人类筛选，而不是生成一个“刚好可用”的版本就结束
实战一：《答案之书》小程序重设计
提示词发送后，Claude Code会采用对话的方式与你共同完成产品设计
1、分享你的想法，可以是一句话提示词：我想要做一个《答案之书》小程序
2、项目类型、产品Todos马上就有了
3、产品核心理解：通过问题确认用户画像、风格、体验等
4、选择AI构思好的设计方向
5、最后执行方案，生成过程非常快，不得不说Claude-4的强大
6、完成后还会有相应的总结如：核心特色、交互流程等
7、最终效果：视觉层次清晰、交互流畅、符合目标用户审美预期。
实战二：《色彩心理测试》多风格实践
这套提示词还有一个强大之处就是可以实现多风格，在对话过程中根据需求选择风格，也可以不断的调整和变换风格，或者让AI产出多套风格对比。
也就是同一个产品需求，通过调整设计方向，成功产出了两种截然不同的风格：
"蒙德里安美学"风格：
这次我测试了一个《色彩心理测试》的小程序，开始通过对话实现了这种“蒙德里安美学”风格的设计界面
"森林童话屋"风格：
不满意？再次尝试了生成”森林童话屋“风格的设计界面，非常轻松就搞定了
而这些切换，仅需在对话中一句话完成，真正做到了“用自然语言切换界面风格”。
总结
"产品设计提示词系统"提示词系统代表了AI时代设计协作的新可能性。它不是要替代人类产品设计师，而是要成为强大的设计助手，帮助更多人跨越专业门槛，创造出令人惊艳的产品体验。
写提示词、写代码、做产品，本质上都是一样的：
你先得明白你想要的是什么，再通过不断反馈和优化，靠近那个理想目标。
通过不断优化提示词工程，我们能够让AI成为真正的"设计大师"，为产品创新提供强大支撑。这不仅是技术的进步，更是创意工作方式的革命。
如果你也想用Claude Code配合“产品设计大师”提示词来完成界面原型，欢迎关注 苏米客 公众号回复"提示词"获取：