wangjia
f37f1f3b59
ci-pangolin / Lint — shellcheck (pull_request) Successful in 10s
ci-pangolin / Redline Scan — 脱敏 (UI 文案) (pull_request) Successful in 29s
ci-pangolin / OpenAPI Sync Check (pull_request) Successful in 32s
ci-pangolin / Cleartext Scan — Android 禁明文 (pull_request) Successful in 21s
ci-pangolin / Portable SQL — 可移植性 (mysql/sqlite) (pull_request) Successful in 24s
ci-pangolin / Flutter — analyze + test (pull_request) Failing after 21s
ci-pangolin / Codegen Drift — token 生成物未漂移 (pull_request) Successful in 10s
ci-pangolin / DS-flow — 原型/跨端同源/代码色单源闸 (pull_request) Successful in 8s
ci-pangolin / Go — build + test (pull_request) Successful in 10s
Deploy Site / deploy-site (push) Successful in 2m33s
ci-pangolin / Go — integration (mysql/redis testcontainers) (pull_request) Failing after 4m33s
ci-pangolin / Golden — 视觉回归 (全量:components/auth/desktop/tablet) (pull_request) Successful in 19s
ci-pangolin / E2E Smoke — L4 进程级端到端 (pull_request) Failing after 13m16s
#1 官网语言下拉漂移:根因=官网 CSP 无 unsafe-inline,Header.jsx 下拉全用内联 style= 被浏览器拦→菜单飘视口右边。修:搬进 website.css 的 .langwrap/.langsel /.langmenu/.langmenu a(全走 var(--token),right:0 锚按钮下方,min-width 160 加宽),Header.jsx 删净内联 style。 #2 主页登录态右上角「用户中心」按钮:Header.jsx 读同源 localStorage 'pg_uc_refresh',有则 .linklogin 位显「用户中心」(→ /user/)、无则「Log in」。 i18n nav.center 6 语言。 #3 用户中心「返回主页」按钮:UserCenter.tsx 顶栏加 <a href="/">(home 图标), i18n backHome 6 语言。 顺带堵同源闸漏洞:check-l1-sync ③ 原只匹配带引号图标键('refresh-cw'),漏了 裸标识符键(home),导致新加的 home 未被校验就通过。修解析器匹配裸键;并按 ds-flow 把 home 登记进 design/prototype/icons.js。同源闸复跑绿(裸键现全受检)。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
穿山甲 VPN · Pangolin VPN — Design System
极简、轻量、亲和的跨平台网络加速品牌设计系统。暖大地色(穿山甲鳞甲)+ 大量留白 + 双语界面。
这是一套从零创建的品牌设计系统(无既有代码库 / Figma / Logo 输入)。所有视觉决策记录于本文件,所有 token 见 colors_and_type.css,可预览的卡片在 preview/,可拼装的高保真界面在 ui_kits/。
1. 产品语境 Product Context
穿山甲(Pangolin) 是一款面向大众的消费级网络加速应用。核心价值主张:一键连接、智能选线、即开即用。品牌人格定位为「极简轻量、亲和易用」——不堆砌技术参数,不制造焦虑,用干净的留白和温暖的大地色传递「顺畅又轻松」的感觉。
脱敏说明:面向国内市场,品牌与宣传统一定位为「网络加速 / 体验优化 + 隐私保护」,不使用「VPN / 翻墙 / 窜 / 自由穿越」等敏感词。产品主名统一为「穿山甲」(不带 VPN 后缀);VPN 仅在必要技术文档出现。
名字 穿山甲(Pangolin) 取鳞甲「防护 / 安全」之意。视觉系统提炼出行走穿山甲剖面作为核心图形母题。
覆盖的产品界面(UI Kits)
- 移动 App(iOS / Android)—— 登录/注册、首次引导、连接主界面、服务器列表、统计、账户中心(套餐/设备/兑换/联系)。
ui_kits/mobile/ - 桌面客户端(Windows / macOS)—— 登录/注册、首次引导、连接面板、节点、统计、账户中心、联系我们、设置。
ui_kits/desktop/ - iPad 客户端 —— 侧栏分栏布局(连接/节点/统计/账户),触控尺寸,复用移动端原子。
ui_kits/tablet/
用户后台(账户 / 套餐 / 设备 / 兑换)已直接集成进移动与桌面客户端(因支付走外部渠道,独立 Web 后台冗余,故不再单列)。
生产前端:Flutter
生产代码使用 Flutter。设计令牌的 Dart 版本见 flutter/pangolin_theme.dart(与 colors_and_type.css 一一对应:颜色、间距、圆角、动效、文字、明/暗 ThemeData)。ui_kits/ 的 React/HTML 为视觉规范参考,Flutter 实现以其为蓝本。详见 flutter/README.md。
输入来源 Sources
- 无外部素材。本系统完全从品牌简述「穿山甲 vpn软件」与一轮用户访谈问题推导而来。
- 若后续有真实 Logo / Figma / 代码库,请通过 Import 菜单附上,我会据此校准。
2. 内容基础 Content Fundamentals
界面为中英双语,中文为主、英文为辅。重要:真实产品在任一时刻只显示一种语言——用户在设置/账户页通过「中文 / EN」段控切换,中英不会同时出现。设计系统 preview/ 卡片里出现的中英并排,仅用于同时展示两套字体规范(specimen),不代表产品 UI。三个 UI Kit 均已实现单语言切换。
- 人称:对用户用「你」,自称用「我们」。亲切、平等,不端着。例:「我们不记录你的浏览数据」。
- 语气:简短、肯定、轻松。动词开头的祈使句优先:「一键连接」「选择节点」「立即升级」。
- 大小写:英文标题用 Title Case 或全大写小字 overline(
PANGOLIN、ACCOUNT);正文句首大写。中文不加句号于短标题/按钮。 - 数字与单位:数据读数用等宽字体,数值大、单位小且着 clay 主色(
86.4 Mb/s、24 ms)。 - Emoji:不使用 emoji 作装饰。状态一律用「色点 + 文字胶囊」表达。
- 专业术语:保留行业通用英文词(WireGuard、Kill Switch、P2P),不强行翻译,降低理解成本。
- Vibe:像一位靠谱又不啰嗦的朋友。文案示例:
- 连接态:
已连接 Connected/连接中 Connecting/未连接 Off - 营销:
极速畅连 Smooth、极速 · 稳定 · 省心 - 隐私承诺:
我们不记录你的浏览数据 · 端到端加密
- 连接态:
3. 视觉基础 Visual Foundations
色彩 Color
- 主色 Clay / Copper(
--clay-500 #B96A3D):温暖的黏土铜色,呼应穿山甲鳞甲与大地。用于主按钮、强调、链接、选中态。完整 50–900 色阶见 token。 - 中性 Sand / Taupe:暖灰中性 50–950,承担文本与表面。
--sand-950 #14110E是深色画布(暖 espresso,非纯黑——保持温度)。 - 语义色(大地调校):
success #5B8C5A(连接/安全)、warning #D69A3C(连接中)、danger #C0533B(断开/错误)。各配*-subtle浅底。 - 双主题:浅色以沙米白(
--sand-50)为画布、纯白为卡面;深色以暖 espresso 为画布、#221E19为卡面。切换方式:<html data-theme="dark">。所有颜色都走语义 token,组件天然双主题。 - 影像基调(若引入照片):偏暖、自然光、低饱和大地色,可加细微胶片颗粒;避免冷色与高对比霓虹。
字体 Type
- Display — Sora(600/700):标题、营销大字、Logo 字标。几何但不冰冷。
- Body / UI — Manrope(400–700):界面与正文主力。
- CJK — Noto Sans SC(400/500/700):中文专用伴随字体,与上面两者度量协调。
- Mono — JetBrains Mono:IP、速率、时长、密钥等数据读数,启用 tabular nums。
- 字阶:48 / 36 / 30 / 24 / 20 / 18 / 16 / 14 / 12。标题字距收紧(-0.02em),overline 字距放宽(0.08em)。
- ⚠️ 字体说明:四款均为开源字体(Google Fonts),作为本品牌正式选定字体,非临时替代。若你已有授权品牌字体,告诉我替换。
间距与网格 Spacing
- 4px 基准网格。常用:4 / 8 / 12 / 16 / 24 / 32 / 48 / 64。
- 留白慷慨——这是「极简轻量」气质的关键,卡片内边距偏大(16–24px),区块间距 32–48px。
圆角 Radius
- 偏大圆角传递亲和:
sm 6 / md 10 / lg 14 / xl 20 / 2xl 28 / full。 - 按钮多用
full(胶囊);卡片用lg–xl;输入框用md。
阴影与高度 Elevation
- 暖色调投影(
rgba(45,30,20,…)),柔和克制,不用冷灰阴影。 sm卡片静置、md浮起卡片/按钮悬浮、lg弹窗/抽屉、xl模态。- 深色主题下投影改为深黑透明并加强。
- 焦点环:
0 0 0 4px var(--ring)(clay 半透明),用于输入与可聚焦元素。
边框 Borders
- 细边 1–1.5px,色用
--border(浅:sand-200 / 深:白 10% 透明)。强调边--border-strong。 - 卡片优先「
surface+shadow-sm+ 极淡边框」组合,而非重边框。
动效 Motion
- 缓动:进出场用
--ease-out cubic-bezier(.22,1,.36,1),状态切换用--ease-in-out。 - 时长:
fast 140ms(hover/press)、base 220ms(开关/展开)、slow 360ms(页面/抽屉)。 - 风格:淡入 + 轻微位移为主,无浮夸弹跳。连接中状态用环形 loader 旋转;连接成功用色环扩散(
box-shadow外环)。
交互态 States
- Hover:主色按钮加深一档(
--accent-hover);幽灵按钮显示--accent-subtle浅底;列表行显示 sand 浅底。 - Press:轻微缩放(
scale .97)+ 再深一档(--accent-press)。 - Focus:clay 焦点环(见上)。
- Selected:
--accent-subtle底 + clay 文字/勾选。 - Disabled:sand-200 底 + sand-400 字,
not-allowed。
透明与模糊 Transparency / Blur
- 克制使用。仅用于:导航/工具栏滚动时的毛玻璃(
backdrop-filter: blur(12px)+ 表面色 80% 透明)、模态遮罩(--overlay)。 - 不做大面积玻璃拟态。
布局规则 Layout
- 移动端:顶栏 + 中部巨型连接键 + 底部节点条/Tab,关键操作单手可达。
- 桌面端:紧凑窄窗(~360–420px 宽),托盘风格;或带左侧栏的标准窗口。
- Web 后台:左侧导航 + 内容区,最大内容宽度约束(~1080px),大量留白。
- 固定元素:移动端底部 Tab、桌面端标题栏、Web 顶栏(滚动毛玻璃)。
背景 Backgrounds
- 以纯色画布为主(沙米白 / 暖 espresso),不滥用渐变。
- 渐变仅出现在:App 图标、PRO 套餐卡、连接成功的氛围光晕等少数强调处,且只在 clay 同色系内(
clay-600 → clay-800)。 - 不使用紫蓝渐变、不使用重复纹理贴图。
4. 图标系统 Iconography
- 图标库:Lucide(细线条、2px stroke、圆角端点)。与「极简轻量、亲和」气质一致。经 CDN 引入,非本地字体:
在 React/JSX 中可用
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script> <i data-lucide="power"></i> <script>lucide.createIcons()</script>lucide-react或直接渲染<i data-lucide>后调用createIcons()。 - 常用图标:
power(连接)、shield-check(已保护)、globe(节点)、zap(极速)、settings、loader(连接中,旋转)、check(选中)、chevron-right、map-pin、user、credit-card。 - ⚠️ 替代说明:本品牌无自有图标字体,Lucide 为选定的最接近匹配(同等线宽/圆角风格)。如需自有图标集请提供。
- 国旗/国家:服务器列表不用 emoji 国旗(跨平台渲染不一致),改用 sand 底圆角方块内的 2 字母国家码(HK / JP / SG / US),选中态翻转为 clay 底白字。
- Unicode 装饰字符:不使用。
- 品牌图形:核心母题为「行走穿山甲」(实心鳞甲剪影,朝右),见
assets/logo-*.svg与assets/app-icon.svg,不要用 emoji 或随手 SVG 替代,直接复制。
5. 资产清单 Assets
assets/ 内:
logo-mark.svg— 主标记(clay 行走穿山甲,鳞甲剪影,朝右)logo-mark-white.svg— 反白标记(深色背景用,奶油色身体 + clay 鳞脊)logo-mark-mono.svg— 单色标记(currentColor,内联使用时随文字色)logo-wordmark.svg— 标记 + 字标横版锁版(穿山甲 / PANGOLIN)app-icon.svg— App 图标(clay 渐变圆角方 + 白色穿山甲)
⚠️ Logo 为本系统新创建的图形(用户选择「抽象几何标记 + 字标」,迭代后定为行走穿山甲剪影,朝右)。若你有正式 Logo,请替换
assets/内文件并告知我。
6. 索引 Index — 本仓库文件清单
| 路径 | 内容 |
|---|---|
README.md |
本文件 — 品牌语境、内容基础、视觉基础、图标系统、索引 |
colors_and_type.css |
唯一真相来源:色阶、语义 token(浅/深)、字体、字阶、间距、圆角、阴影、动效 |
flutter/ |
生产令牌 + 组件雏形:pangolin_theme.dart(明/暗 ThemeData + 全量令牌)、widgets/(连接键/服务器行/套餐卡/按钮/状态胶囊 Dart 雏形)+ 接入说明 |
assets/ |
Logo 各变体 + App 图标(SVG) |
preview/ |
设计系统卡片(色彩 / 字体 / 间距 / 组件 / 品牌)— 渲染于 Design System 标签页 |
ui_kits/mobile/ |
移动 App UI Kit(登录/引导/连接/节点/统计/账户中心) |
ui_kits/desktop/ |
桌面客户端 UI Kit(登录/引导/连接/节点/统计/账户/联系/设置) |
ui_kits/tablet/ |
iPad 客户端 UI Kit(侧栏分栏布局,复用 mobile 原子) |
ui_kits/website/ |
官网宣传页 UI Kit(产品/定价/下载/文档/Blog,响应式 + 注册引导) |
ui_kits/usercenter/ |
Web 用户中心 UI Kit(概览/订阅导入/兑换/邀请返利) |
SKILL.md |
Agent Skill 入口(可下载用于 Claude Code) |
每个 ui_kits/<product>/ 内含 README.md、index.html(可点击 demo)与若干 *.jsx 组件。