Agent Skills
› julianoczkowski/designer-skills
julianoczkowski/designer-skills
GitHub将设计简报拆解为按顺序排列的可独立构建任务清单,采用垂直切片策略。通过分析现有代码库和依赖,生成包含结构、样式和交互的完整任务列表,并按依赖、视觉优先级和风险排序,最终保存为 Markdown 文件,辅助开发规划。
Install All Skills
npx skills add julianoczkowski/designer-skills --all -g -y
Skills in Collection (8)
将设计简报拆解为按顺序排列的可独立构建任务清单,采用垂直切片策略。通过分析现有代码库和依赖,生成包含结构、样式和交互的完整任务列表,并按依赖、视觉优先级和风险排序,最终保存为 Markdown 文件,辅助开发规划。
用户希望将设计简报分解为具体任务
用户询问应该首先构建什么内容
用户要求根据设计简报创建任务列表
用户提及 'tasks' 或 'breakdown'
用户需要规划功能的构建顺序
npx skills add julianoczkowski/designer-skills --skill brief-to-tasks -g -y
通过交互式访谈和代码库探索,协助用户制定设计简报。适用于规划新功能、页面或定义 UI 方向,最终保存为 Markdown 文件。
用户想要编写设计简报
计划新功能或页面
定义 UI 方向
提及 'brief'
npx skills add julianoczkowski/designer-skills --skill design-brief -g -y
引导设计师完成从需求澄清到前端构建的完整设计工作流,按顺序执行各阶段并确认产出。
用户希望从头开始一个新项目
用户要求运行完整的设计流程
提及 'design flow' 或 'full workflow'
npx skills add julianoczkowski/designer-skills --skill design-flow -g -y
对已构建的前端应用进行结构化设计审查,对比设计简报与代码实现,重点检查视觉层级、一致性、响应式及无障碍性。必须通过截图工具获取运行界面以辅助判断,确保交付物符合美学规范。
用户要求审查刚构建的功能
要求进行设计批判或 QA 测试
提及 review 或 polish
npx skills add julianoczkowski/designer-skills --skill design-review -g -y
根据设计哲学生成CSS变量或Tailwind配置等基础设计令牌,涵盖明暗模式、间距与字体比例。适用于新项目启动、建立视觉系统或提及tokens时,优先扩展现有配置而非替换。
开始新项目
建立视觉系统
设置设计令牌
提及tokens或design system
npx skills add julianoczkowski/designer-skills --skill design-tokens -g -y
指导构建具有高质量设计感的生成式前端界面,强调遵循特定美学理念。通过探索现有代码库、理解上下文并选择美学方向,生成注重细节且避免通用AI风格的组件或页面代码。
需要构建具有特定美学风格的前端组件
要求根据指定设计理念(如斯堪的纳维亚风格)生成界面布局
npx skills add julianoczkowski/designer-skills --skill frontend-design -g -y
通过深度追问和压力测试帮助用户完善计划或设计,遍历决策树以达成共识。支持自动探索代码库或现有组件来回答问题并提供建议。
用户希望压力测试某个计划或设计
用户要求挑战其思路或方法
用户提及 'grill me'
npx skills add julianoczkowski/designer-skills --skill grill-me -g -y
用于在产品或网站视觉设计前定义结构层,涵盖导航、内容层级、页面结构、URL模式及用户流程。通过调研现有代码库和用户访谈,输出信息架构文档,为后续开发提供结构蓝图。
规划应用的信息架构
映射导航和页面结构
组织文档站点内容
定义用户体验流程
npx skills add julianoczkowski/designer-skills --skill information-architecture -g -y


