Star200+

工作流方案

前端与产品 UI 工作流

为「前端与产品 UI」设计的可审查 Agent 工作流。

为「前端与产品 UI」设计的可审查 Agent 工作流。

对比推荐技能浏览匹配技能

预期结果

  • 明确「前端与产品 UI」的目标
  • 选择匹配的能力
  • 在进入下一步前核验结果

工作流地图

按此顺序执行

01

界定任务

将目标转成清晰、可审查的 Agent 任务。

02

选择能力

为当前阶段选择最匹配的能力，而不是浏览泛化目录。

03

执行并检查

在来源、权限和范围已核对的前提下完成最小有效步骤。

04

核验结论

在进入下一阶段前审查证据和结果。

推荐能力

为每个步骤选择技能

按当前工作流相关性、质量、GitHub 采用度与维护活跃度排序。这是决策指南，不是单一安装命令。

#1Frontend Design质量 · 100

源仓库说明（原文）

Guidance for distinctive, intentional UI design, typography, visual direction, and non-template-like product interfaces.

170K StarsSource terms (see LICENSE.txt)design-creative
对比
$ npx skills add anthropics/skills --skill frontend-design
#2Web Design Guidelines质量 · 100

源仓库说明（原文）

Review UI code for web interface guidelines, UX quality, accessibility, and interaction design best practices.

30K StarsSource terms (see source)design-creative
对比
$ npx skills add vercel-labs/agent-skills --skill web-design-guidelines
#3Figma Implement Design质量 · 100

源仓库说明（原文）

Translate Figma designs into production-ready UI code with close visual fidelity and component-level detail.

25K StarsSource terms (see source)design-creative
对比
$ npx skills add openai/skills --skill figma-implement-design
#4Taste Skill: Anti-Slop Frontend质量 · 100

源仓库说明（原文）

Design and implementation guidance for distinctive landing pages, portfolios, product demos, and purposeful redesigns.

78K StarsMITdesign-creative
对比
$ npx skills add Leonxlnx/taste-skill --skill design-taste-frontend
#5Anthropic Brand Guidelines质量 · 100

源仓库说明（原文）

Apply Anthropic official brand colors, typography, and visual standards to appropriate Anthropic-related artifacts.

170K StarsSource terms (see LICENSE.txt)design-creative
对比
$ npx skills add anthropics/skills --skill brand-guidelines
#6Vercel React Best Practices质量 · 100

源仓库说明（原文）

React and Next.js performance guidance for writing, reviewing, and refactoring production UI code.

30K StarsMITcoding-agents
对比
$ npx skills add vercel-labs/agent-skills --skill vercel-react-best-practices
#7Webapp Testing质量 · 100

源仓库说明（原文）

Use Playwright to interact with and test local web applications, capture screenshots, debug UI behavior, and inspect browser logs.

170K StarsSource terms (see LICENSE.txt)browser-automation
对比
$ npx skills add anthropics/skills --skill webapp-testing
#8Canvas Design质量 · 100

源仓库说明（原文）

Create original visual art, posters, PNG assets, and PDF documents through a clear design philosophy.

170K StarsSource terms (see LICENSE.txt)design-creative
对比
$ npx skills add anthropics/skills --skill canvas-design

适用场景

  • - 前端与产品 UI 工作流
  • - 需要留存审计依据的 Agent 决策
  • - 可控工作区内的试运行

以下情况不适合使用

  • - 任务需要无人监督地访问敏感系统
  • - 无法审查来源材料或结果质量

需要可直接执行的技能包？

技能包包含安装顺序、审计链接和机器可读的 Agent 计划。

浏览技能包