创意 Claude 设计

要解决什么问题

让大模型直接产出一个能看的页面，往往止步于聊天框里的一段 HTML 字符串。拷到浏览器里通常会出现三种情况：样式挤在一坨、元素溢出视口、或者换台设备就崩。做演示稿和原型时问题更明显——静态截图没法交互，重写一版又等于从头再来。

@user_ef9e183a/creative-claude-design 要处理的正是这类一次性的视觉产物：单文件、自包含、可直接在浏览器打开。

技能如何工作

核心思路是把「画一个页面」拆成几项可检查的工作：

• 明确产物类型：先确定这次产出是落地页、演示稿还是原型，三者的信息密度和交互要求差别很大
• 单文件 HTML：所有样式和脚本内联在同一个 HTML 文档里，不依赖外部构建工具或本地资源
• 设计系统驱动：标签里带 design-system、motion 这类标签，说明产出会考虑配色、排版和动效的一致性
• 保留结构空间：官方 related skills 里有 excalidraw 和 architecture-diagram，说明它也适合配合画原型草图和结构图的场景

适用边界与注意点

• 这是一次性产物导向的技能，适合做演示用的原型、内部评审页或方案稿，不适合直接当生产环境的前端架构
• 输出是完整 HTML 文档，需要你自己预览和判断布局是否合理，模型无法看到渲染结果
• 涉及动效和响应式时，建议先在小屏和大屏各看一遍，复杂交互仍需手写代码补足
• 文件中不要夹带真实的用户数据或密钥，原型阶段用占位内容即可