design-workflow

design-workflow is a skill for Claude Code from modu-ai/moai-cowork. It costs 159 tokens per session (3,011 once invoked), scanned A, original, Apache-2.0.

A workflow for bringing design handoff files, design tokens, and project design briefs into a code project. It validates the tokens and loads research, system, and specification notes before interface implementation.

In plain words
What is it for?
Use it to import Claude Design or Figma handoffs, create validated design tokens, and provide design briefs to frontend implementation work.
Why use it?
It keeps imported design rules and brand constraints available to developers so the built interface follows the approved direction.

Skill for Claude Code

Written for Claude Code: user-invocable in frontmatter. Also seen: reads .claude/ paths; names the AskUserQuestion tool; mentions Claude Code.

Part of the moai-designer plugin — 17 skills shipped together

Good fit Use it to import Claude Design or Figma handoffs, create validated design tokens, and provide design briefs to frontend implementation work.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/modu-ai/moai-cowork/design-workflow
Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent
npx skills add modu-ai/moai-cowork --skill design-workflow
Clone the repo
git clone --depth 1 https://github.com/modu-ai/moai-cowork

Made for: Claude Code.

Or install moai-designer, the plugin that ships this one along with the rest of its 17 skills.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for design-workflow

README.md
[![agentmods](https://agentmods.dev/badge/skills/modu-ai/moai-cowork/design-workflow/github.svg)](https://agentmods.dev/skills/modu-ai/moai-cowork/design-workflow)
Your own site
<a href="https://agentmods.dev/skills/modu-ai/moai-cowork/design-workflow"><img src="https://agentmods.dev/badge/skills/modu-ai/moai-cowork/design-workflow/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

agentmods 80×15 button for design-workflow

Your own site · 80×15
<a href="https://agentmods.dev/skills/modu-ai/moai-cowork/design-workflow"><img src="https://agentmods.dev/badge/skills/modu-ai/moai-cowork/design-workflow.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 159 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 3,011 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe. Third-party audits
  • NVIDIA SkillSpector warn 7 Sept 2026
SkillSpector: 2 findings, up to high

These are SkillSpector’s own severities. On a checked sample its high-severity flags on skills were ~96% false positives — a documented command, a public API, a “never do X” rule — so we show them as a caution to read, not a verdict. Why →

  • high Prompt Injection · line 127
    Hidden instructions were detected in comments or invisible text. These could contain malicious directives. Manual review is recommended.
    Fix: Audit all comments and invisible characters. Remove any instructions that direct the agent to perform unauthorized actions. Use plain, reviewable content.
  • medium Agent Snooping · line 93
    Skill enumerates or reads other installed skills. Access to other skills' SKILL.md files or the skills directory reveals prompt instructions, capabilities, and secrets that should be invisible to peer skills.
    Fix: Remove all code or instructions that list or read other skills' files or directories. Skills should operate independently; cross-skill access is a privilege escalation.
How audits are shown
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5.1 $0.00159 $0.03011
Opus 5 $0.00079 $0.01505
Sonnet 5 $0.00032 $0.00602
Haiku 4.5 $0.00016 $0.00301

Measured 6d ago against content hash a4188f2f27ba, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-09, from the pricing page.

Security

Grade A, and why

design-workflow scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 6d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

plugins/moai-designer/skills/design-workflow/SKILL.md · 213 lines

How it starts

The opening of the file, as written. The whole thing — 213 lines — stays where its author put it; the contents beside it link to each section on GitHub.

⚠️ 개발 런타임 전용 — 이 스킬은 MoAI-ADK(Claude Code) 환경을 전제한다. Claude Cowork(Desktop)에서는 .moai/config 의존으로 동작하지 않을 수 있다. Desktop 사용자는 cd-* 체인(design-brief → design-prompt-builder → design-slop-check)을 사용한다.

Design Workflow (design-workflow)

Unified /moai design workflow skill. Handles two complementary responsibilities:

  1. Design artifact import — Path A (Claude Design handoff bundle, ZIP/HTML) and Path B1 (Figma extractor via meta-harness). Produces DTCG-validated design tokens at .moai/design/tokens.json for expert-frontend consumption.
  2. Design-brief context loading — Auto-loads human-authored briefs from .moai/design/ (spec.md, system.md, research.md) into the orchestrator prompt before expert-frontend or design-brand-system runs.

Brand context (.moai/project/brand/) is the constitutional parent across all paths — no path may override brand constraints (design constitution §3.1, §3.3).

Quick Reference

Reserved output paths (design constitution §3.2, must not collide with human files): tokens.json, components.json, assets/, import-warnings.json, brief/BRIEF-*.md, copy.json, path-selection.json — all under .moai/design/.

Path selection (presented via AskUserQuestion when /moai design needs choice):

  1. Path A — Claude Design (권장) — handoff bundle (ZIP or HTML)
  2. Path B1 — Figma — meta-harness generates moai-harness-figma-extractor dynamically

Selection persisted to .moai/design/path-selection.json.

Context-loading priority order (REQ-2 / AC-4 from absorbed design-context skill): spec > system > research. When token budget exceeded, drop in REVERSE priority — never drop spec. Default token_budget: 20000 from design.yaml design_docs.token_budget.

Token estimation: estimated_tokens = ceiling(char_count / 4) * 1.10.

Implementation Guide

Part 1 — Path A: Claude Design Handoff Bundle

Supported formats (Phase 1):

  • ZIP — Claude Design export with manifest.json, tokens.json, components/, assets/
  • HTML — single-file Claude Design export

Read the full file on GitHub · 213 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 6d ago First seen · 213 lines · 159 tokens per session scan A a4188f2f27ba

Subscribe to this mod's changes

design-workflow is a skill published in the GitHub repository modu-ai/moai-cowork (298 stars, last pushed 6d ago), licensed Apache-2.0. It adds 159 tokens to every session and 3,011 once invoked, about $0.0008 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-09-03.

Related

Other skills, from other repositories

instant-ui

Build a BenAI-branded HTML page in the neo-brutalist instant-ui design language (cream background, near-black ink, 3px hard borders, 6px zero-blur shadows, a blue/green/amber gradient stripe, system font plus SF Mono, weight-900 headings). Use for any BenAI landing page, offer, sales, or pricing page, onboarding or…

naveedharri/benai-skills · 217 tokens

colors

Color systems for web interfaces — OKLCH conversion and palette generation, contrast measurement (APCA/WCAG), gamut and P3 fallbacks, theming, one meaning per color. INVOKE PROACTIVELY when converting color values, building or extending a palette or token set, checking or reporting contrast, or theming light and dark…

PrabhdeepSingh/claude-plugins · 99 tokens

ui-polish

Design-engineering details that make an interface feel polished — border radius, optical alignment, shadows and elevation, animations and micro-interactions, press feedback, icons. INVOKE PROACTIVELY when building or reviewing UI components, adding motion or hover/active states, or when the user says "make it feel…

PrabhdeepSingh/claude-plugins · 109 tokens

layout

Layout structure for web interfaces — grouping, alignment, negative space, reading order, progressive disclosure, breakpoints, direction-aware (RTL) structure. INVOKE PROACTIVELY when structuring a page or component, spacing or aligning controls, deciding what collapses at small sizes, or reviewing frontend structure.…

PrabhdeepSingh/claude-plugins · 104 tokens

motion-system

Define the app's motion language before animating anything -- a small set of durations, easings, and named moves that every animation draws from, so the app feels designed instead of decorated. Use before writing the first animation in a project, or when existing motion feels scattered.

OneWave-AI/open-agent-stack · 58 tokens

polish-pass

The de-AI pass -- audit a vibe-coded app for template smell in design and copy, then fix it with editorial layout, purposeful motion, and human-sounding words. Use after any build session, before anyone else sees it.

OneWave-AI/open-agent-stack · 51 tokens