菜单
Use this skill to generate well-branded interfaces and assets for Rlabs, either for production or throwaway prototypes/mocks/etc. Contains essential design guidelines, colors, type, fonts, assets, and UI kit components for prototyping.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Execute a roadmap end-to-end and AUTONOMOUSLY — phase by phase, task by task: develop in a worktree, review in a fresh context, fix findings, then merge to main. No human gate by default. Use when the user says 'run the roadmap', 'autopilot this', 'ship phases 1-3', 'work through docs/roadmap/', wants unattended multi-phase delivery landed on main, or hands over a roadmap file expecting the whole thing built, reviewed, and merged. Use --supervised to restore per-phase human checkpoints.
Create distinctive, production-grade UI designs in Paper.design MCP — full design system + brand guide + all screens, or a single flow. Use when the user asks to mock up, wireframe, design screens, produce UI, build a visual prototype, or mentions Paper / Paper.design / design system / brand guide / screen layouts for the project. Commits to a bold aesthetic direction (editorial, brutalist, luxury, retro-futuristic, etc.) rather than defaulting to generic AI-SaaS looks. Grounds every design decision in the PRD and architecture, not guesswork.
Diff current UI against Paper design refs with Playwright runtime fidelity checks, then fix mismatches in place. Run before (and during) UI work.
Single-milestone/phase delivery pipeline — implements every open issue in one GitHub milestone (or one roadmap phase) as parallel, conflict-free PRs, each pre-reviewed by a fresh-context reviewer agent. Stops with all PRs open for human merge. Use when the user says 'run factory on milestone N', 'ship phase 003_auth', 'open PRs for the auth milestone', or '/factory --milestone <N>'. For end-to-end multi-phase roadmap execution, use /autopilot instead.
Implement a feature end-to-end from a spec file at docs/specs/<name>.md — code it and verify it. Stops with a working tree the user can review. Supports --commit (auto-commit, output only log) and --pr (auto-commit + open PR, output only log + URL). Use when the user says 'implement the auth spec', 'build feature X', 'code up the Y spec', 'work through docs/specs/<name>.md', or points at a spec and asks to execute it.
File GitHub milestones + issues for a roadmap, a phase, or a spec — one milestone per phase, one issue per task/slice — using the trunk-based patterns from /spec, /roadmap, and /feature. Use when the user says 'create the GitHub issues', 'file the issues for this roadmap', 'open issues for this spec', 'make the milestones', or points at docs/roadmap/*.md or docs/specs/*.md and asks to hand them to GitHub.
| name | rlabs-design |
| description | Use this skill to generate well-branded interfaces and assets for Rlabs, either for production or throwaway prototypes/mocks/etc. Contains essential design guidelines, colors, type, fonts, assets, and UI kit components for prototyping. |
| user-invocable | true |
Read README.md first — it carries the brand voice, palette rules, motion grammar, accessibility floor, and caveats. Then load the materials that match the surface you're building. Skipping the matching kit is the most common source of off-brand output.
colors_and_type.css — light + dark CSS variables and semantic tokens.tokens.css — spacing, radii, elevation, motion tokens.assets/logo/ — rlabs-logo.svg, rlabs-mark.svg. Use these directly; never recreate.assets/brand/chain-glyph.svg — the chain-of-nodes motif. Use for hero/section accents only.assets/icons.md — Lucide setup (24px, 1.75px stroke). Stroke-only.Pick the bucket that matches what the user asked for and load everything in it. Reading just the CSS tokens is not enough — the kits encode component composition, spacing rhythm, and copy patterns that the tokens alone don't convey.
slides/index.html end-to-end. It is the canonical 7-slide template (title, section, content, metric, quote, comparison, closing) — copy structure and class names from it instead of inventing new ones.ui_kits/website/index.html, then read each component: SiteNav.jsx, Hero.jsx, FeatureGrid.jsx, CodeShowcase.jsx, Footer.jsx, plus README.md.ui_kits/app/index.html, then read Sidebar.jsx, TopBar.jsx, Overview.jsx, Agents.jsx, Transactions.jsx, _shared/Primitives.jsx, plus README.md.Before composing a component, check preview/ for the matching specimen card and match its proportions, padding, and state treatment. These are the source of truth for token application:
colors-core.html, colors-neutrals*.html, colors-accents.html, colors-semantic.html, colors-modes.html.type-display.html, type-body.html, type-mono.html, type-scale.html.spacing-scale.html, spacing-radii.html, spacing-elevation.html, spacing-motion.html, radii.html, elevation.html.components-buttons.html, components-inputs.html, components-nav.html, components-card.html, components-cards.html, components-badges.html.brand-logo.html, brand-logo-dark.html, brand-logo-light.html, brand-glyph.html, brand-motif.html, brand-icons.html, brand-voice.html.If a token decision feels ambiguous, the preview card wins.
If invoked with no guidance, ask the user which surface (slides / website / app) and what they want to build, then load the matching kit before producing anything.
After applying the design (artifact or production code), you must run a Playwright check before reporting done. Visual drift between intent and output is the failure mode this skill exists to prevent.
Use the playwright MCP (mcp__plugin_playwright_playwright__*) — it is available in this environment.
index.html from slides/, ui_kits/website/, or ui_kits/app/. Take a full-page screenshot.#0A0A0B dark, #FAFAF7 light).rgba(_,0.08) defaults.cubic-bezier(.2,.8,.2,1); no bounces.→ for CTAs.If Playwright is unavailable in the current environment, say so explicitly and list the brand-rule checks you performed by reading the output instead — do not silently skip verification.
#C6F24E, Ember #FF5B2E, Lapis #2E5BFF, Violet #8B5CF6. One accent per view.cubic-bezier(.2,.8,.2,1), 120/200/320/520ms. Transform + opacity only. No bounces. No linear easings.→) encouraged.#0A0A0B (not pure black). Light surface: #FAFAF7 (warm paper).