Welcome to
VibeCodingPark
Start Learning!
点击下方任意色阶图例卡片，直接开启沉浸式三栏工作流，获取实战提示词与高阶品控细节。
洞察与定义
进入工作台
设计
进入工作台
Coding与部署
进入工作台
上线与推广
进入工作台
增长与迭代
进入工作台
Do's & Don'ts Guide
Vibe Coding 核心设计准则
掌握顶尖 Vibe Coder 的设计细节，将普通应用打造成具备绝佳留白、呼吸感和品牌力的精品。
Mood
Vibe Coding Masterclass
Vibe & Core Mood First (调性先发)
在着笔代码逻辑前，先挑选一款精致配色。以柔和背景为主，配合特定高饱和按钮（如 ClickUp 标志性紫色与荧绿强调色），一键抓住审美眼球。
Do: 使用色彩深度或微弱底色差来区分卡片。
Don't: 使用粗糙的黑色 1px 实线框或者纯灰色的廉价阴影。
Spacing
Vibe Coding Masterclass
Spacious Group Breathing (空气感间隔)
优秀的界面应当充满韵律感与适当的留白。在复杂的交互区块和信息组件之间，使用 20px–30px 大边框内距，杜绝信息挤压。
Do: 使用 20px - 30px 大量内、外负空间营造高级空气质感。
Don't: 全站强硬套用完全相同的紧凑留白使图文极为挤塞。
Honesty
Vibe Coding Masterclass
Architectural Honesty (拒绝冗余修饰)
摒弃无谓的虚拟 Diagnostic 日志条或仿造控制台打印（Tech-Larping）。纯粹的卡片与直给的文案，是高段位界面设计的标志。
Do: 用直白、贴地的词汇标注按钮：例如 "开启我的工作流"。
Don't: 虚构 "CORE_NODE_ONLINE" 或 "PORT: 3000" 装饰边缘。
Accessibility
Vibe Coding Masterclass
44px+ Accessible Target (触手可及的舒适)
PC端轻盈，移动端厚实。所有按钮和可点击的目标在移动端必须保证 44px 以上高/宽裕度，保证指尖触碰的极致流畅度与舒适度。
Do: 按钮使用 ClickUp 特定的 52px (My Courses) 或 54px (View All) 高。
Don't: 设计只有 24px 高的小按钮，增加用户的误触挫败感。
Elevation
Vibe Coding Masterclass
Colors Light Up Shadow (彩色柔光代替灰色阴影)
ClickUp 的阴影哲学是在按钮和卡片底部投射具有轻微透明底色的彩色阴影（Brand Glow/Accent Glow），增加悬浮感和精致品牌氛围。
Do: 使用自带 Alpha 透明度的主角紫色或荧绿软阴影 (y轴 10px–35px)。
Don't: 使用全黑或深灰色的生硬低位置阴影。
Interactive Prompt Engine
Prompt Customizer Sandbox
通过调整下方参数，即时组装大师级的 Vibe Coding 引导提示词，帮助你的 AI 助手规避冗余逻辑、实现高级风格。
配置我的开发者 Vibe
本引子包含 Scope Guardrail、Aesthetic 视觉圆度以及类型安全引导。复制后即可在提示 AI 助手时放在首行，避免生成任何“无用脏代码”。
VIBE-PROMPT-ENGINE.js
READY TO DEPLOY
// Vibe Coding Auto-Generated Master Directive // Mode: DEEP | Frame: REACT | Guardrails: SUPER Guardrail Strict Requirement: - Absolute Scope Ceiling: Build strictly what is described. NO unsolicited features, fake logs or simulated indicators. - Single screen boundary: Solve the issue within a single responsive view. - If any database setup is missing, gracefully degrade to localStorage state. [TECH STACK PROTOCOL] Use React 19 + TypeScript + Vite. Keep index.html as standard, load files dynamically in hierarchical structures. [AESTHETIC VIBE] Break the task down into 5 sequential steps. Do not jump to Step 2 before testing Step 1. Focus strongly on type validation first. Remember: True craft is executing a concise scope to perfection. Build exactly what is requested.
一键复制，贴入 AI Studio 或本地模型终端