360 Secure SkillHub
360 安全技能中心

Vibe Design

Vibe Design 是一份视觉设计方法指南：讲解用设计词汇而非艺术词汇撰写提示词、以设计系统锚定结构、按「项目类型+风格+布局+配色+设计系统+渲染」分层提示词、指定宽高比，并给出多方案迭代与在 Figma 等生产工具中精修的流程，同时对比 Midjourney、Figma AI、DALL-E/GPT、Stable Diffusion、Canva 的适用场景。

ivangdavila
ivangdavila
热度 90.88
最近更新 2026-05-11 17:26:00
分类：创作依赖：纯提示词应用场景：UI 原型 / 图像生成 / 品牌素材 / 工作流

安装技能

复制下面的话术发给你的 Agent，它会通过 secure-skills 检索并安装该技能。

执行命令安装此 skill： npx secure-skills-cli add vibe-design
Metadata
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
  • 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.