How do I install the Vibe Design skill?

Run npx skillmds add modbender/vibe-design in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Vibe Design safe to use?

This skill has not completed SkillMD's automated safety review yet. Capability flags: docs only. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Vibe Design?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Vibe Design free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Vibe Design?

modbender (@modbender) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Vibe Design by modbender — Agent Skill

Name: Vibe Design
Rating: 4.2 (5 reviews)
Author: modbender

File contents

What is Vibe Design

Design where you describe what you want and let AI generate visuals, layouts, and assets. You iterate based on results rather than pixel-pushing from scratch. Same philosophy as vibe coding applied to visual design.

Core principle: AI handles exploration and generation. You handle curation and refinement.

Quick Reference

Topic	File
Prompting for visuals	`prompting.md`
UI/UX design with AI	`ui-design.md`
Image generation tips	`image-gen.md`
Figma AI workflow	`figma.md`
Tools by use case	`tools.md`

Core Rules

1. Use Design Vocabulary, Not Art Vocabulary

AI responds differently to design vs art terms.

❌ Art words: "beautiful", "fantasy", "render", "painting", "stunning" ✅ Design words: "interface", "layout", "component", "spacing", "hierarchy"

Bad: "beautiful mobile banking product, minimal futuristic style" Good: "mobile banking app UI in Material Design 3, clean layout, consistent spacing, data cards with financial metrics"

2. Anchor with Design Systems

Adding a design system name drastically improves structure:

"Material Design 3" → balanced spacing, cards, shadows
"Apple HIG" → soft radii, clear typography, native feel
"IBM Carbon" → enterprise dashboard layouts
"Atlassian" → B2B tone, crisp typography

3. Layer Your Prompts

Build prompts with structure:

[Project type] UI design for [product/audience],
[style keywords],
[layout type],
[color palette],
[design system reference],
[rendering style]

4. Aspect Ratios Matter

Web: --ar 16:9
Mobile: --ar 4:5 or --ar 9:16
Square/icons: --ar 1:1
Always specify for consistent output

5. Iterate, Don't Perfect First Try

Vibe design = rapid exploration.

Generate 4-8 variants
Identify elements that work
Remix: "Like image 2, but with the color palette from image 3"
Refine winner in production tool (Figma, etc.)

6. AI for Exploration, Tools for Production

AI generates: Mood, direction, concepts, rough layouts
Production tools refine: Pixel-perfect spacing, real content, responsive behavior

Don't try to get production-ready from AI. Use it for the 80% exploration, finish the 20% manually.

7. Reference Over Description

When possible, show don't tell:

Attach reference images
Link to existing designs you like
Use "in the style of [specific designer/brand]"

8. Design System Consistency

For production work:

Export AI concepts as references, not finals
Rebuild in your design system
Maintain your spacing, typography, and color tokens
AI inspiration → human implementation

9. Know the Tool Strengths

Tool	Best For
Midjourney	Artistic concepts, mood exploration
Figma AI	UI iteration, production design
DALL-E/GPT	Quick mockups, image editing
Stable Diffusion	Custom training, open-source control
Canva	Marketing assets, social media

See tools.md for detailed comparison.

---name: vibe-designdescription: Create visual designs with AI tools. Covers prompting for UI/graphics, Midjourney techniques, Figma AI workflow, and iteration patterns.--- ## What is Vibe Design Design where you describe what you want and let AI generate visuals, layouts, and assets. You iterate based on results rather than pixel-pushing from scratch. Same philosophy as vibe coding applied to visual design. **Core principle:** AI handles exploration and generation. You handle curation and refinement. ## Quick Reference | Topic | File | |-------|------| | Prompting for visuals | `prompting.md` | | UI/UX design with AI | `ui-design.md` | | Image generation tips | `image-gen.md` | | Figma AI workflow | `figma.md` | | Tools by use case | `tools.md` | ## Core Rules ### 1. Use Design Vocabulary, Not Art Vocabulary AI responds differently to design vs art terms. ❌ Art words: "beautiful", "fantasy", "render", "painting", "stunning" ✅ Design words: "interface", "layout", "component", "spacing", "hierarchy" Bad: "beautiful mobile banking product, minimal futuristic style" Good: "mobile banking app UI in Material Design 3, clean layout, consistent spacing, data cards with financial metrics" ### 2. Anchor with Design Systems Adding a design system name drastically improves structure: - "Material Design 3" → balanced spacing, cards, shadows - "Apple HIG" → soft radii, clear typography, native feel - "IBM Carbon" → enterprise dashboard layouts - "Atlassian" → B2B tone, crisp typography ### 3. Layer Your Prompts Build prompts with structure: ``` [Project type] UI design for [product/audience], [style keywords], [layout type], [color palette], [design system reference], [rendering style] ``` ### 4. Aspect Ratios Matter - Web: --ar 16:9 - Mobile: --ar 4:5 or --ar 9:16 - Square/icons: --ar 1:1 - Always specify for consistent output ### 5. Iterate, Don't Perfect First Try Vibe design = rapid exploration. 1. Generate 4-8 variants 2. Identify elements that work 3. Remix: "Like image 2, but with the color palette from image 3" 4. Refine winner in production tool (Figma, etc.) ### 6. AI for Exploration, Tools for Production - **AI generates**: Mood, direction, concepts, rough layouts - **Production tools refine**: Pixel-perfect spacing, real content, responsive behavior Don't try to get production-ready from AI. Use it for the 80% exploration, finish the 20% manually. ### 7. Reference Over Description When possible, show don't tell: - Attach reference images - Link to existing designs you like - Use "in the style of [specific designer/brand]" ### 8. Design System Consistency For production work: - Export AI concepts as references, not finals - Rebuild in your design system - Maintain your spacing, typography, and color tokens - AI inspiration → human implementation ### 9. Know the Tool Strengths | Tool | Best For | |------|----------| | Midjourney | Artistic concepts, mood exploration | | Figma AI | UI iteration, production design | | DALL-E/GPT | Quick mockups, image editing | | Stable Diffusion | Custom training, open-source control | | Canva | Marketing assets, social media | See `tools.md` for detailed comparison.

Frequently asked questions