메뉴
移动端 UI 架构设计规范，覆盖全屏背景处理、页面层级、画布编排、颜色系统和间距标准。用于使用 Pencil 设计移动端页面、重构页面壳层、整理页面与组件在画布上的摆放关系，尤其适合需要统一主页面横向排布、子页面纵向挂载、组件集中在第一列的场景。
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
| name | pencil-architecture |
| description | 移动端 UI 架构设计规范，覆盖全屏背景处理、页面层级、画布编排、颜色系统和间距标准。用于使用 Pencil 设计移动端页面、重构页面壳层、整理页面与组件在画布上的摆放关系，尤其适合需要统一主页面横向排布、子页面纵向挂载、组件集中在第一列的场景。 |
当需要创建全屏宽度的背景时：
fill_container 或具体的屏幕宽度（如 402px）alignItems: center 让内容自动居中根容器 (无 padding)
├─ 全屏背景区域 (width: fill_container 或 402px)
│ └─ 背景内容 (width: 362px, 居中)
└─ 内容包裹容器 (width: 362px, 自动居中)
├─ 模块 1
├─ 模块 2
└─ 模块 3
❌ 错误：在有 padding 的容器内创建全屏背景
container (padding: [0, 20, 20, 20])
└─ background (width: 402px) // 会被 padding 限制
✅ 正确：先创建全屏背景，再添加内容容器
container (padding: [0, 0, 20, 0], alignItems: center)
├─ background (width: fill_container)
└─ contentWrapper (width: 362px)
rotation: 180 实现从上到下的渐变stroke 和 effect示例：
fill: {
type: "gradient",
gradientType: "linear",
enabled: true,
rotation: 180,
size: { height: 1 },
colors: [
{ color: "#44A08D", position: 0 }, // 顶部深色
{ color: "#4ECDC4", position: 0.3 }, // 中间过渡
{ color: "#FAFAF8", position: 1 } // 底部背景色
]
}
遇到布局问题时，按顺序检查：
当发现结构问题需要重构时：
整理 .pen 画布时，按“组件列 / 主页面行 / 子页面列”三层组织，不把新增节点随意散落在画布上。
y 方向向下扩展，不在第一列继续横向散放组件。x 方向横向展开，每个主页面占一列。y 方向继续延伸，例如商品详情页下方依次挂评价抽屉、规格弹窗。x 基线，再确定主页面起始列的 x 基线。x 一致，只更新 y 形成纵向链路。x 方向展开？// 主容器：无左右 padding
U("mainContainer", { padding: [0, 0, 20, 0], alignItems: "center" })
// 头部区域：包含全屏背景
headerSection = I("mainContainer", {
type: "frame",
layout: "vertical",
width: "fill_container",
height: "fit_content",
gap: 20,
alignItems: "center"
})
// 全屏渐变背景
background = I(headerSection, {
type: "frame",
width: "fill_container",
height: 180,
fill: {
type: "gradient",
gradientType: "linear",
enabled: true,
rotation: 180,
size: { height: 1 },
colors: [
{ color: "#44A08D", position: 0 },
{ color: "#4ECDC4", position: 0.3 },
{ color: "#FAFAF8", position: 1 }
]
}
})
// 背景内的内容（居中）
profileContent = I(background, {
type: "frame",
layout: "horizontal",
width: 362,
height: "fit_content",
gap: 16,
padding: [32, 20],
alignItems: "center"
})
// 统计卡片（居中）
statsRow = I(headerSection, {
type: "frame",
layout: "horizontal",
width: 362,
height: 84,
gap: 12
})
// 其他内容包裹容器
contentWrapper = I("mainContainer", {
type: "frame",
layout: "vertical",
width: 362,
height: "fit_content",
gap: 20
})
// 将其他模块移动到 contentWrapper
M("ordersCard", contentWrapper)
M("servicesCard", contentWrapper)
M("noticeText", contentWrapper)
// 绿色系 - 主要品牌色
primary: {
dark: "#2A6B42", // 深绿 - 渐变起点
main: "#3D8A5A", // 主绿 - 图标、强调色
medium: "#44A08D", // 中绿 - 渐变中间
light: "#4ECDC4", // 青绿 - 渐变过渡
pale: "#C8F0D8" // 浅绿 - 激活背景、徽章
}
// 背景色
background: {
primary: "#FAFAF8", // 主背景 - 页面底色
card: "#FFFFFF", // 卡片背景 - 白色
elevated: "#F5F4F1" // 提升背景 - 微黄白色
}
// 文字色
text: {
primary: "#1A1918", // 主文字 - 标题、重要信息
secondary: "#6D6C6A", // 次要文字 - 描述文本
tertiary: "#9C9B99", // 三级文字 - 辅助信息、占位符
quaternary: "#A8A7A5",// 四级文字 - 未激活状态
disabled: "#3C3B39" // 禁用文字
}
// 边框色
border: {
light: "#ECE8E3", // 浅边框 - 卡片边框
medium: "#E5E4E1", // 中边框 - 分割线
strong: "#D1D0CD" // 强边框 - 强调边框
}
// 白色系 - 用于深色背景上
white: {
solid: "#FFFFFF", // 纯白 - 头像、卡片
high: "#FFFFFFCC", // 80% 不透明 - 副标题
medium: "#FFFFFF80", // 50% 不透明 - 辅助文字
low: "#FFFFFF26", // 15% 不透明 - 按钮背景
subtle: "#FFFFFF1F", // 12% 不透明 - 徽章背景
border: "#FFFFFF33" // 20% 不透明 - 边框
}
// 强调色
accent: {
orange: "#D89575", // 橙色 - 温馨提示、次要强调
coral: "#D08068", // 珊瑚色 - 警告、负面指标
gold: "#FFD700" // 金色 - 特殊徽章、VIP
}
shadow: {
light: "#1A191808", // 3% 黑色 - 轻微阴影
medium: "#1A19180F", // 6% 黑色 - 标准阴影
strong: "#00000014" // 8% 黑色 - 强阴影
}
// 头部渐变 - 从深到浅到背景色
headerGradient: {
colors: [
{ color: "#44A08D", position: 0 }, // 深绿
{ color: "#4ECDC4", position: 0.3 }, // 青绿
{ color: "#FAFAF8", position: 1 } // 背景色
]
}
// 卡片渐变 - 品牌色渐变
cardGradient: {
colors: [
{ color: "#3D8A5A", position: 0 }, // 主绿
{ color: "#4D9B6A", position: 1 } // 亮绿
]
}
#1A1918 (text.primary)#6D6C6A (text.secondary)#9C9B99 (text.tertiary)#A8A7A5 (text.quaternary)#FFFFFF (white.solid)#FFFFFFCC (white.high)#3D8A5A (primary.main)#A8A7A5 (text.quaternary)#FFFFFF (white.solid)#3D8A5A (primary.main)#E5E4E1 (border.medium) + 1px#ECE8E3 (border.light) + 1px#E5E4E1 (border.medium) + 1px#FFFFFF26 (white.low)// 激活状态
active: {
background: "#C8F0D8", // 浅绿背景
text: "#3D8A5A", // 主绿文字
icon: "#3D8A5A" // 主绿图标
}
// 未激活状态
inactive: {
background: "transparent",
text: "#A8A7A5", // 灰色文字
icon: "#A8A7A5" // 灰色图标
}
// 悬停状态
hover: {
background: "#F5F4F1", // 微黄白色
text: "#1A1918", // 主文字色
icon: "#3D8A5A" // 主绿图标
}
// 卡片阴影
cardShadow: {
type: "shadow",
shadowType: "outer",
color: "#1A191808", // 3% 黑色
offset: { x: 0, y: 2 },
blur: 8
}
// 提升阴影
elevatedShadow: {
type: "shadow",
shadowType: "outer",
color: "#1A191808", // 3% 黑色
offset: { x: 0, y: 2 },
blur: 12
}
// 按钮阴影
buttonShadow: {
type: "shadow",
shadowType: "outer",
color: "#1A191808", // 3% 黑色
offset: { x: 0, y: 1 },
blur: 6
}
// 头像阴影
avatarShadow: {
type: "shadow",
shadowType: "outer",
color: "#00000014", // 8% 黑色
offset: { x: 0, y: 4 },
blur: 12
}
darkMode: {
background: {
primary: "#0A0A0A", // 深黑背景
card: "#1A1A1A", // 卡片背景
elevated: "#2A2A2A" // 提升背景
},
text: {
primary: "#FFFFFF", // 主文字
secondary: "#B0B0B0", // 次要文字
tertiary: "#808080" // 三级文字
},
primary: {
main: "#4ECDC4", // 主色调整为更亮的青绿
light: "#6EDDD4" // 浅色调整
}
}
// 卡片组件
card = I(parent, {
type: "frame",
fill: "#FFFFFF", // background.card
cornerRadius: 16,
stroke: {
align: "inside",
thickness: 1,
fill: "#E5E4E1" // border.medium
},
effect: {
type: "shadow",
shadowType: "outer",
color: "#1A191808", // shadow.light
offset: { x: 0, y: 2 },
blur: 8
}
})
// 标题文字
title = I(card, {
type: "text",
content: "标题",
fill: "#1A1918", // text.primary
fontSize: 18,
fontWeight: "600"
})
// 描述文字
desc = I(card, {
type: "text",
content: "描述信息",
fill: "#9C9B99", // text.tertiary
fontSize: 13,
fontWeight: "500"
})
// 激活状态按钮
activeBtn = I(parent, {
type: "frame",
fill: "#C8F0D8", // primary.pale
cornerRadius: 100
})
activeIcon = I(activeBtn, {
type: "icon_font",
fill: "#3D8A5A" // primary.main
})
所有设计稿中的文字内容必须使用简体中文
// ✅ 正确 - 使用简体中文
button = I(parent, {
type: "text",
content: "立即购买",
fill: "#FFFFFF"
})
searchBar = I(parent, {
type: "text",
content: "搜索商品",
fill: "#9C9B99"
})
// ❌ 错误 - 使用英文
button = I(parent, {
type: "text",
content: "Buy Now",
fill: "#FFFFFF"
})
以下情况可以使用英文或其他语言：
在完成设计后，检查以下内容是否使用简体中文：
审计并收敛 Vue3 + Vant 项目与 Pencil `.pen` 设计稿中的重复 UI 结构，判断哪些应该复用为同一组件、哪些适合做同源变体、哪些必须拆分。用于用户提到组件抽取、组件统一、组件架构、复用评审、Top Bar、状态栏、底部导航、商品卡片、搜索栏、空态、订单行，或要求同时检查设计稿与代码里还有哪些可合并组件时。
为 Pencil `.pen` 设计文件创建可复用组件、替换重复节点为真实 `ref` 实例、校验组件是否真的被复用。用于用户要求抽组件、沉淀公共组件、统一卡片/按钮/商品块、把重复结构替换成组件实例，或排查“看起来像组件但其实不是复用”的情况。
根据用户口述需求对 Pencil `.pen` 设计稿做增量更新，包含需求归一化、目标节点定位、最小化结构修改、组件复用保护、移动端布局约束校验和截图回归。用于用户要求改文案、调布局、增删模块、替换卡片、调整头部/背景、按描述修改当前 Pencil 设计稿，尤其适合“我说一句，你直接改稿”的场景。
Generate a requirements mindmap document from a website URL for Vue3 frontend projects. Use when a user provides a site link and wants a structured PRD-style breakdown of pages, flows, features, data, and Vue3 implementation scope in mindmap format.
为采用 FSD + DDD 架构的 Vue3 + Vant 项目提供架构设计、模块拆分、目录规划、边界评审、重构方案和实施约束。用于用户提到架构师、架构设计、分层、领域建模、模块边界、技术方案、重构、FSD、DDD、Vue3、Vant，或需要把业务需求落到 app/pages/widgets/features/entities/shared 与 domain/application/infrastructure/presentation 等层级时。