Vibe Design
📖 技能介紹
name: Vibe Design slug: vibe-design version: 1.0.0 description: Create visual designs with AI tools. Covers prompting for UI/graphics, Midjourney techniques, Figma AI workflow, and iteration patterns. metadata: {"clawdbot":{"emoji":"🎨","requires":{"bins":[]},"os":["linux","darwin","win32"]}}
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
7w4.net小蔥技能站收錄全網優質技能，值得收藏。
- 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.
🤖 AI 評測
這個 Skill 質量不錯，內容實用且易於理解。最大優點是提供了大量可直接使用的 prompt 模板和清晰的工作流程，能幫助設計師快速上手 AI 輔助設計。"AI 做探索、人類做精選"的理念很有價值。不足之處是內容偏基礎，缺少實際設計案例展示，且某些工具使用技巧可能隨著 AI 工具更新而變得過時。適合作為入門指南使用，但進階學習資源較少。
