メニュー
General-purpose desktop web prototype. Single self-contained HTML file with semantic markup, inline CSS, and responsive breakpoints. Default for landing, marketing, docs, or SaaS pages.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/pujan-modha/clover-design --skill web-prototypeコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
SKILL.md を表示中
| name | web-prototype |
| description | General-purpose desktop web prototype. Single self-contained HTML file with semantic markup, inline CSS, and responsive breakpoints. Default for landing, marketing, docs, or SaaS pages. |
| triggers | ["prototype","mockup","landing","single page","marketing page","homepage","web page","site"] |
| df | {"mode":"prototype","platform":"desktop","scenario":"design","preview":{"type":"html","entry":"index.html"},"design_system":{"requires":true,"sections":["color","typography","layout","components"]}} |
Produce a single self-contained HTML prototype using the active design system.
--df-color-* and fonts to --df-font-family.| Page kind | Rhythm |
|---|---|
| Landing | Hero → Features → Stats/Quote → Split → CTA → Footer |
| Marketing | Hero → Logos → CTA → Footer |
| Pricing | Hero → Comparison → CTA → Footer |
index.html with inline CSS, semantic HTML, data-df-id tags.<artifact identifier="slug" type="text/html" title="Title">
<!doctype html><html>...</html>
</artifact>
SOC 職業分類に基づく
