设计 App、后台、游戏界面和完整网站落地页，生成 UI 设计稿；按需把设计稿或截图还原为 HTML/CSS、现有前端项目或微信小程序。用户要求页面设计、完整落地页、截图还原或小程序高保真时使用。不用于普通插画、海报、故事板、纯图片编辑或无设计任务的业务代码修改。
安装
尚未确认此技能的独立目录。下面命令会打开仓库技能选择器，请按上游说明选择技能。
skills CLI
npx skills add oil-oil/draw-ui相关推荐
更多- CCanvas DesignAnthropic官方依据设计理念生成 .png 与 .pdf 格式的海报、艺术作品等静态视觉设计，要求原创而非模仿现有艺术家作品。设计与前端182.9k 仓库星标
- FFrontend DesignAnthropic官方在新建或改造前端界面时提供视觉设计指引，涵盖审美方向与字体排版，帮助避免模板化的默认样式。设计与前端182.9k 仓库星标
- Vvercel-labs/agent-skillsVercel技能合集Vercel 发布的技能合集，包含 React/Next.js 性能优化规则、Web 设计规范审查和 Vercel 项目成本与性能审计。设计与前端9 个技能32.8k 仓库星标
- AAccessibilityMicrosoft官方Primary accessibility skill for VS Code. REQUIRED for new feature and contribution work, and also applies to updates of existing UI. Covers accessibility help dialogs, accessible views, verbosity settings, signals, ARIA announcements, keyboard navigation, and ARIA labels/roles.设计与前端194.2k 仓库星标
- CCustomizations In The Agent HostMicrosoft官方Architecture and hard-won debugging lessons for customization enablement (plugins, MCP servers, agents, skills, instructions) in the agent host. Use when changing how customizations are discovered, published, enabled/disabled, or handed to a provider SDK; when a customization shows the wrong enabled state in the UI; or when a disabled MCP server or plugin is still reaching the model.设计与前端194.2k 仓库星标
- DDesign PhilosophyMicrosoft官方The VS Code design philosophy — a shared Values→Principles→Moves vocabulary for reasoning about UI in design terms instead of raw pixels. Use when designing, building, reviewing, or giving feedback on any visual surface; when deciding a radius, spacing, type role, icon size, border, color, or motion; or when translating a "this feels off" observation into a concrete, principled fix.设计与前端194.2k 仓库星标