用途：当用户要求搭建完整网站、落地页、Web 仪表盘或应用、产品页、作品集、带横幅或首屏的营销页、带特色图的博客内容布局，以及任何需要视觉素材的网页界面时使用本技能。目标是产出无占位图、素材齐备的完整网页体验。
主要能力：分两步。第一步按前端设计美学原则完成界面设计，包括确定目的与使用者、选择鲜明的美学方向（极简、繁复、复古未来、有机、奢华、活泼、粗野等）、明确框架与性能及无障碍等技术约束、追求辨识度；具体涉及字体（建议避免 Inter、Roboto、Arial 及系统字体）、用 CSS 变量统一配色与主题、用动画实现效果与微交互、非常规版式（不对称、重叠、斜向流）、渐变网格与噪点纹理及几何图案和强烈阴影等背景细节。第二步识别设计中所需全部图片（首屏横幅、产品与作品图、插画或图标、背景图、分隔或装饰元素），逐个用生图脚本生成，再将生成的图片正确引用进最终代码，并处理 alt、loading、sizes 等属性与响应式图片。
使用方式：对每张所需图片运行生图脚本，示例命令为：uv run ~/.claude/skills/web-design-complete/scripts/generate_image.py --prompt "描述" --filename "yyyy-mm-dd-hh-mm-ss-descriptive-name.png" --resolution 1K|2K|4K。分辨率建议：1K 约 1024px 用于小图、图标、缩略图；2K 约 2048px 用于常规图、产品图；4K 约 4096px 用于首屏横幅、大背景。文件名格式为时间戳加描述名，时间戳用 24 小时制，名称用小写连字符描述文本。
限制与依赖：脚本需要 Gemini API Key，可通过 --api-key 传入，否则读取 GEMINI_API_KEY 环境变量。图片保存在当前目录。建议先完成整体设计再生成图片，提示词要与所选美学一致并足够具体，并选用合适分辨率。未提供具体收费、价格与效果保证等信息。