菜单
Structured workflow for creating professional designs — slide decks, documents, landing pages, app mockups, and motion storyboards.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/siddsachar/row-bot --skill design-creator命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
基于 SOC 职业分类
正在显示 SKILL.md
| name | design_creator |
| display_name | Design Creator |
| icon | 🎨 |
| description | Structured workflow for creating professional designs — slide decks, documents, landing pages, app mockups, and motion storyboards. |
| enabled_by_default | true |
| version | 1.0 |
| tags | ["design","presentations","marketing"] |
| activation | {"phrases":["one-page product concept","product concept","create a one-pager","landing page","slide deck"],"keywords":["design","product","concept","one-page","one-pager","landing","deck"],"negative_phrases":["meeting notes","research competitors"],"examples":["Create a one-page product concept"]} |
| author | Row-Bot |
When the user asks you to create a presentation, design a slide deck, make marketing material, build a one-pager, design a wireframe, design a landing page, or prototype an app, follow this structured approach:
Designer projects have a mode. The mode dictates layout, canvas, available templates, and which export targets make sense. Always lock the mode before structuring content.
| User's intent | Mode | Default canvas |
|---|---|---|
| pitch deck, presentation, slide deck | deck | 16:9 |
| report, one-pager, brief, document | document | A4 |
| marketing site, hero page, product page | landing | landing (1440×3200, scrollable) |
| mobile app prototype, click-through wireframe | app_mockup | phone (390×844) — or desktop (1440×900) |
| video shot list, scene-by-scene board | storyboard | 16:9 |
If the request is ambiguous (e.g. "design something for our launch"), ask ONE clarifying question to choose between deck / landing / app_mockup. If the project already exists, read its mode with designer_get_project and only switch via designer_set_mode if the new task genuinely belongs to a different mode.
Before generating anything, clarify:
If the user gives a vague request like "make me a deck", ask ONE focused question. If they give a clear brief, proceed immediately — don't over-question.
Before designing, outline the content. The structure depends on the mode:
deck): Title → Problem → Solution → Key Features → Proof/Data → Team → CTAdocument): Header → Value Prop → 3 Key Points → Social Proof → CTA or Title → Executive Summary → Sections with Data → Conclusion → Next Stepsdeck 1:1 or 9:16): Headline → Subhead → Benefits Grid → Testimonial → CTAlanding): Nav → Hero (headline + subhead + primary CTA) → 3-feature row → Social proof / logos → Pricing tiers → FAQ → Footer CTA. One tall scrollable page is the norm.app_mockup): List every screen first (Home / Detail / Settings / Onboarding / etc.). Each screen = one route = one page. Define the navigation graph (Home row tap → Detail; tab bar → Home/Search/Profile; back button → previous route).storyboard): 4–8 shots, each with a beat description, on-screen caption, and camera direction (e.g. "wide push-in", "handheld OTS").deck or app_mockup depending on whether you need click-through).Share the outline with the user before generating HTML if there are more than 3 pages, OR for any app_mockup (so the route graph is approved before wiring).
Apply these when generating designs:
deck, document, and storyboard canvases clip with overflow:hidden. Keep content lean:
deck slide: ONE heading + EITHER one paragraph (≤45 words), up to 3 cards (≤25 words each), OR chart/image + ≤2 bullets. Max 5 bullets. 64–96 px edge padding, heading ≤4.5rem, body ≤1.4rem. Leave ≥48 px bottom breathing room.document page: 130–160 words body copy. Max ~5 top-level sections. 16–24 px gap, line-height 1.45–1.6, ≥32–48 px bottom padding. Split pages rather than cramming.storyboard shot: one eyebrow + one heading (≤6 words) + one paragraph (≤35 words) OR quote + ≤2 metadata cards OR one voiceover card + one direction line + one footer strip. 3–4 visible blocks MAX. Put extra detail in page notes via designer_generate_notes.Count blocks BEFORE writing HTML. A 2-page brief beats a cramped 1-page brief that clips.
opacity + z-index:0 and a readable text background, or omit it. For real imagery, use a typed image slot.display:flex; gap:12–24px; with flex:1 on the primary. Secondary/ghost buttons must be visibly distinct from the primary (ghost/outline) — never two identical filled pills.<div data-row-bot-image-slot="NAME" style="width:100%;aspect-ratio:16/9;"></div>. designer_generate_image and designer_insert_image fill it automatically, sized to cover. Or pass position="replace:.my-class" to target a specific container. Never ship a floating absolute-positioned overlay unless the user asked for one.After any full-page rewrite, mode switch, canvas resize, or multi-page update:
designer_critique_page(page_index=<n>) per changed page.overflow, either designer_apply_repairs(categories=["overflow"]), trim + update, or split via designer_add_page.overflow finding.Before publishing or exporting, also run designer_brand_lint for a quick contrast / off-palette / missing-alt sweep.
After initial generation:
landing and app_mockup only)These two modes use a sandboxed runtime — never write <script> tags or inline onclick=. Wire interactivity declaratively:
data-row-bot-route="<route_id>".data-row-bot-action="navigate:<route_id>" on the clickable element. Optional data-row-bot-transition="slide_left|slide_right|slide_up|fade|none".data-row-bot-action="toggle_state:<key>" and style the on-state with [data-row-bot-state-<key>="on"] selectors on <html>.data-row-bot-action="play_media:<asset_id>".Prefer the dedicated tools over hand-editing these attributes:
designer_add_screen to add a new route.designer_link_screens(source_route, selector, target_route) to wire navigation.designer_set_interaction(source_route, selector, action, target, ...) for toggles and media.designer_reorder_routes to change the route order.designer_preview_screen to view one route in isolation.For app mockups: ONE screen per page, fixed device viewport on the body, scrolling happens inside an inner .screen-body{overflow-y:auto}.
For landing pages: ONE tall scrollable page, max-width:1440px content wrapper, NEVER set body{overflow:hidden} or a fixed pixel height.
Before delivering:
designer_preview_screen (or the in-app preview) to confirm navigation works.designer_brand_lint for a quick contrast / off-palette / missing-alt sweep before publishing.deck → PDF (print/share), PPTX (editable), PNG (single slides)document → PDF (canonical), HTML (web)landing → designer_publish_link (interactive bundle with runtime + transitions) or designer_export(format="html") for a single self-contained fileapp_mockup → designer_publish_link (interactive click-through prototype URL) — this is almost always what the user wantsstoryboard → PDF (shot list) or PNG (per-shot frames)