web-design-studio
一站式生成带AI配图的专业级网页设计与文档
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：web-design-studio。 它的用途是：一站式生成带AI配图的专业级网页设计与文档 完整的 Skill 内容见：https://321skill.com/skills/web-design-studio/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“使用 Web Design Studio 技能，为一家新开的瑜伽工作室设计一个清新、宁静的官网首页。” 它会首先确定设计风格与色彩方案，然后生成所需的冥想场景、瑜伽姿势等图片，最后交付包含所有图片、完整代码以及一份详细设计说明文档的成品。
介绍
Web Design Studio 解决了从创意到交付的完整网页设计难题。传统网页设计需要设计师、前端开发、文案和配图人员协作，耗时耗力。这个技能将前端设计、AI图像生成和专业文档生成整合为一个自动化流程，用户只需提出需求，即可获得包含所有视觉元素的完整、可运行的网页代码以及客户交付用的设计规范文档。
使用时，只需在 Claude 中激活该技能并描述你的网页需求，例如“为一家宠物店创建官网”。技能会遵循前端设计原则，规划布局、色彩和字体，然后自动识别所需图片（如横幅、产品图），调用 Gemini API 生成匹配的图片，并整合到最终交付的 HTML/CSS/JS 代码中。整个过程还包含图片链接验证和设计文档生成。
它非常适合需要快速产出高质量、带原创配图的网页原型或成品的 UI 设计师、前端开发、产品经理和内容创作者。对于营销专员和电商运营，它也是制作落地页或活动页面的高效工具。
使用前请确保已配置好 Gemini API 密钥。由于依赖外部图像生成 API，生成大量高分辨率图片可能需要一定时间并产生相关费用。建议在生成后运行内置的验证脚本，确保所有资源链接正确。
核心特点
与仅提供代码片段或设计稿的同类技能不同，它集成了 AI 图像生成，确保交付物是包含真实、风格统一图片的完整作品，而非带有占位符的半成品；同时强制生成专业的设计规范文档，满足了面向客户交付的实际工作流需求。
注意事项
不适合需要高度定制化复杂交互或后端逻辑的 Web 应用开发场景。
常见问题
需要自己准备图片吗？
不需要，技能会自动分析设计需求并调用 AI 生成所有所需图片。
生成的代码可以直接上线使用吗？
代码是生产级、响应式的，但上线前仍需根据具体业务需求进行功能和安全性测试。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/web-design-studio/raw/index.md 读取 web-design-studio 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/web-design-studio/raw/index.md（查看排版版本）