From riff
Propose architecture and data structure decisions for a feature, producing a visual HTML design document for review.
How this skill is triggered — by the user, by Claude, or both
Slash command
/riff:designThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Produce a design document proposing how to build or refactor a feature. Typically follows a `brief` — the brief identifies *what* to do, the design proposes *how*.
Produce a design document proposing how to build or refactor a feature. Typically follows a brief — the brief identifies what to do, the design proposes how.
The user references a task, issue, or an existing brief. Examples:
/riff:design 586/riff:design the new checkpoint pipeline/riff:design (in a workspace that already has a brief — design builds on it).workspace/{id}-{slug}/ exists. Add .workspace/ to .gitignore if missing.design.html in the workspace folder.Use the Tokyo Night dark theme. Inline the full CSS from templates/style.css as a <style> block.
.callout class)lang="zh-CN" — Chinese explanations, English technical terms{project} / {identifier} / .workspace/{folder}/design.htmlGuides creation, editing, and verification of skills for AI coding agents using test-driven development with subagent scenarios. Use when authoring or debugging skills.
npx claudepluginhub junjzhang/riff --plugin riff