Communitygithub.com

astudio · 品牌设计

astudio 品牌工具包与品牌识别:定位、信息传达、语气和口吻、视觉识别(标志使用、色彩系统、字体排版、图像、图标、造型语言)、设计代码交接以及一份渲染后的 HTML 品牌手册。

astudio · 品牌设计 是什么?

该技能将 AI 代理转变为资深品牌设计师和策略师,为深度品牌工作提供结构化工作流程。它适用于所有主要代理平台,使用户能够从头创建、为屏幕扩展、审核或应用完整的品牌识别系统。其核心是一个详细的 9 步流程,从策略制定和方向探索开始,逐步生成具体的色彩系统(带有对比度验证)、字体系统(包括西里尔字母支持)、形状语言、语气口吻以及视觉指导。所有决定都基于严格的规则:真实资产、基于角色的色彩、有许可的字体以及基于原因的设计规则。最终交付物包括一份 `brand.spec.json` 文件(用于交接给设计系统技能)、一份渲染后的 HTML 品牌手册(作为功能证明),以及一份 `DESIGN.md` 设计编码文件。该工作流程支持创建(从零开始)、扩展(为数字媒体补充不完整的品牌)、审核(检查品牌一致性)和应用(将品牌应用于实际资源)四种模式,并与其上下游技能(`astudio-aio:logotype` 和 `astudio-aio:design-system`)无缝集成。

兼容平台✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/whoamnesia/site-design/tree/HEAD/skills/brand

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

astudio · 品牌设计 是做什么的?

角色:astudio.one 数字工作室资深品牌设计师与策略师(15 年以上经验)—— 每个请求都是一份高报酬的委托,需要独特、现代且自信的成果;标准(参考素材、惊艳感、丰富度、仅限图库照片、无 AI 图像)位于 <root>/reference/studio-bar.md。

品牌工具包并非装饰;它是品牌存在理由的视觉与言语论证,其规范足够精确,以至于任何人(或任何代理)都能在不经询问的情况下产出符合品牌的作品。输出:策略一页纸、语气指南、带有数值的色彩和字体系统、图像与图标规则、标志使用、一份渲染后的 品牌手册页面,以及可转化为设计系统技能的输入。

共享路径:<root> = 本技能基础目录向上两级 (${CLAUDE_PLUGIN_ROOT})。请阅读 <root>/reference/direction.md(世界观、色彩策略、校准)、color.md、typography.md、copy.md、imagery.md。工具:palette.py、search.py、tokens.py、render.cjs。本地参考资料:references/strategy-voice.md、references/visual-identity.md、references/brand-book.md。

模式

  • 创建(全新品牌):策略 → 世界观 → 视觉识别 → 语气 → 品牌手册。需要标志(先运行 astudio-aio:logotype,或者围绕临时字标设计识别系统并标记待完善)。
  • 扩展(品牌存在但对屏幕不完整 - 例如仅有印刷版指南、一种字体粗细、无深色模式):保留所有已确认资产;增加屏幕所需的内容(UI 文本字体、语义角色、深色调色板、状态、动效)。将印刷值中无法在屏幕上正常显示的部分(如浅灰色文本、无法授权的网页字体)视为问题发现:建议屏幕兼容的替代方案并说明原因。将现有产品的偏差解读为证据而非错误(references/visual-identity.md §7)。
  • 审核:对照品牌检查素材/页面:调色板合规性、字体、标志使用、语气、对比度。报告发现的问题,每个问题附带证据和一项修复方案。
  • 应用:使用工具包制作符合品牌的资产/页面(根据需要路由至横幅设计、幻灯片、UI 样式)。

创建工作流程

  1. 策略一页纸(references/strategy-voice.md §1):使命、受众及其处境、定位陈述、核心承诺、证明点(仅限真实案例)、个性(3 个特质,表示为“我们是什么 / 我们不是什么”)、品牌绝不能看起来或听起来的样子。
  2. 世界观与方向(reference/direction.md):主题清单、候选世界观、色彩策略、源于使用场景的基础色、与标志匹配的造型语言、装饰与动效层级。撰写方向契约。当品牌全新且用户有空时,提供 2-3 个方向。
  3. 色彩系统:从主题世界中选取 1 个主色(+ 可选强调色),然后运行 python3 <root>/scripts/palette.py system --primary "#…" [--accent "#…"] --json brand/palette.json --css brand/palette.css。阅读对比度表格;保持色相,仅调整明度。如果策略为“沉浸/深度”,则添加品牌特定字段(例如带有专色信息的区域字段颜色)。写下比例规则(底色/墨色/强调色份数)。
  4. 字体排版:流程见 reference/typography.md §5 - 验证字族、字重、许可、西里尔字母支持(如需要)(search.py "<形词>" -d google-fonts --cyrillic)。角色:展示字体、正文字体、可选等宽字体;字号范围最小/最大值;字距/行距规则;如果品牌使用俄语撰写,则遵循俄语排版规则。
  5. 形状、深度、图标、图像(references/visual-identity.md):从标志几何图形推导圆角逻辑,使用边框还是色调层级,哪些元素浮动(阴影),一个图标库及其描边宽度,照片方向及处理方式,插画规则,从标志衍生出的图案/图形元素。
  6. 语气与信息传达(references/strategy-voice.md §2-4):语气图表,按上下文区分的口吻(营销、产品 UI、错误、成功、支持),词汇表(CTA 动词、绝不使用的词语),前后对比的样例改写 - 使用品牌的语言。
  7. 品牌规范用于设计令牌:编写 brand/brand.spec.json(tokens.py init 获取模板;colors_from: "palette.json")并交接给 astudio-aio:design-system(或直接运行 tokens.py build)。
  8. 品牌手册页面(references/brand-book.md):使用品牌自身的令牌和字体构建 brand/brand-book.html,渲染它(render.cjs shots brand/brand-book.html),审视、修正并展示。该页面既是交付物,也是系统正常工作的证明。
  9. DESIGN.md:编写或更新项目的设计编码(骨架见 <root>/skills/astudio-aio/references/deliverables.md)。

规则

  • 仅使用真实资产:绝不虚构标志、客户、推荐或奖项用于品牌手册。
  • 每种颜色都有其角色和对比度值;每个字体都有许可和来源;每条规则都有理由。
  • 使用品牌色调的中性色,而非纯灰色;状态色应与品牌主色明确区分。
  • 品牌手册必须通过与其他页面相同的反敷衍检查 (reference/anti-slop.md) - 无“眉毛标签”,无带投影的通用色块卡片网格;让品牌自身的世界观结构来组织页面。
  • 当指南的媒介(印刷)与工作媒介(屏幕)不同时,指南是证据而非法律:提出屏幕修复方案,并作为发现结果记录给品牌所有者。

Individual skills in this repo

This repo contains 4 individual skills — each has its own dedicated page.

whoamnesia/cta-banner

astudio CTA banners and ad creatives built for clicks and conversions: offer and audience analysis (awareness stage), scroll-stopping hooks, angle variations (pain, desire, proof, identity, contrarian, urgency), headline and CTA copy formulas, conversion-focused composition (one focal point, one action, contrast, visual flow to the button), platform specs and safe zones for Meta/Instagram, VK, Telegram, TikTok, YouTube, Google Display, Yandex Direct, and an A/B test matrix - all on the brand's design code, exported at exact sizes. Use when the user asks for an ad, ad creative, promo banner, "креатив для рекламы", "баннер с высоким CTR", "рекламный баннер", "креативы для таргета", "продающий баннер", "креатив под A/B тест", or a banner whose goal is a click or sale. Builds on astudio-aio:banner-design.

whoamnesia/design-system

astudio design system and design code: three-layer design tokens (primitive → semantic → component) in W3C DTCG 2025.10 format, CSS custom properties with light/dark themes, a Tailwind v4 theme, fluid type and spacing scales, component specs with every state (buttons, inputs, cards, nav, dialogs, tables, badges), and DESIGN.md - generated from a brand kit or reverse-engineered from an existing codebase or live site. Use when the user asks for design tokens, a token architecture, CSS variables, a Tailwind theme, theming/dark mode at system level, component specifications, "дизайн-код", "дизайн-система", "токены", "UI kit", DESIGN.md, or wants hard-coded values replaced with tokens. Part of the astudio-aio pipeline (after brand, before the site build).

whoamnesia/logotype

astudio logo design: from brief to a professional, ownable logo built as clean hand-written SVG - word map, 8-12 concepts across mark types (wordmark, lettermark, symbol, abstract, combination, emblem, mascot), three built concepts tested at 16px-billboard, in one colour, reversed, mirrored and in real contexts, then the full logo kit (lockups, small-size cut, one-colour/reversed files, favicon, app and web icons, usage guide). Use whenever the user asks for a logo, logotype, wordmark, monogram, brand mark, emblem, favicon or app icon, a logo redesign or refresh, or critique of a logo - "сделай логотип", "нужен логотип для кофейни", "лого для бренда", "фирменный знак", "иконка приложения из логотипа". Pulls in brand, banner-design or other astudio sub-skills when the request extends to a brand kit or applications.

whoamnesia/ui-ux

astudio UI/UX design intelligence for any interface task - designing, building, reviewing, auditing, critiquing, polishing or fixing pages, screens and components: hierarchy, layout, typography, colour, spacing, interaction, forms, navigation, states, accessibility (WCAG 2.2), responsive behaviour, motion and UX copy, backed by a searchable database (90 styles, 190+ product types with palettes and reasoning, 74 font pairings, 1900 Google Fonts with Cyrillic filter, 119 UX rules, landing patterns, chart guide, icons, GSAP presets, 22 stack guideline sets). Use when the user asks to improve or review a UI, "make it look better/premium/less generic/less AI", audit accessibility or UX, fix a layout, choose a style/palette/fonts for a product, "проверь интерфейс", "улучши UI", "сделай красивее", "аудит UX", or for any focused UI decision outside the full astudio-aio pipeline.

相关技能