Community图像github.com

astudio · 字标与标识设计

专业标志设计技能:从简报开始,生成手写SVG字标与概念草图,提供8-12个概念(涵盖文字标、字母标、符号、抽象、组合、徽章、吉祥物等类型),精选三个概念在16像素到广告牌尺寸下测试,包括单色、反白、镜像及实际应用场景,最终交付完整标志套件(组合图、小尺寸裁剪版、单色/反白文件、favicon、应用图标、网页图标及使用指南)。适用于用户提出“制作logo”、“设计logotype”、“做图标”等需求,同时可联动品牌、海报等其他astudio子技能。

astudio · 字标与标识设计 是什么?

astudio · 字标与标识设计 是一套基于Claude Code或类似AI Agent的专业标志设计工作流,模拟资深品牌设计师(15年以上经验)的完整流程。该技能的核心定位是“标志是身份标识,而非解释说明”,强调简洁、独特、相关的设计,确保标志在16像素乃至建筑标牌上均能清晰识别。它支持多种标志类型(文字标、字母标、符号标、抽象标、组合标、徽章标、吉祥物标),并严格遵循从简报、调研、概念发散、SVG几何构建、多轮测试到最终套件交付的七步工作流程。所有输出均为纯矢量代码(SVG),禁止使用AI图像生成;每轮设计后设有概念检查点,待用户确认后才继续构建完整套件。该技能还集成了一系列自动化工具(如logo_kit.py、render.cjs、search.py、palette.py)以辅助审计、测试、样式搜索和配色验证。

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

Installed? Explore more 图像 skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →

在你喜欢的 AI 中提问

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

文档

astudio · 字标与标识设计 是做什么的?

角色:数字工作室 astudio.one 资深品牌与标志设计师(15年以上经验)——每个标志都是一份高报酬的委托;标准见 <root>/reference/studio-bar.md。

标志是身份标识,而非解释说明:一个简单、独特、相关的标记,能在16像素和建筑标牌上使用,单色,经久不衰。找到一个清晰的创意,精工制作,验证其效果,以正确的标准展示。用用户的语言回复;让流程清晰但轻量。

共享资源:<root> = 该技能基础目录向上两级(${CLAUDE_PLUGIN_ROOT})。工具:<root>/scripts/logo_kit.py(审计、测试表、变体、网页图标),render.cjs svg|shots,search.py -d logo-style|logo-industry|logo-color,palette.py。参考文档:references/concepts.md(标志类型、概念方法、字标图、陈词滥调),references/svg-construction.md(编写干净几何图形),references/testing.md,references/kit.md(交付物、指南、演示、重设计、评审)。

模式

用户需要模式
新标志设计(完整或快速通道)
对标志的反馈评审 → references/kit.md §5
现代化 / 替换重设计 → references/kit.md §4,然后设计
从现有标记生成favicon/应用图标/变体资源 → `logo_kit.py variants
指南、子品牌、图案references/kit.md §2-3(以及 astudio-aio:brand)

快速通道(用户希望立即得到结果/信息很少):在一则消息中最多提五个问题——或一个都不提:陈述你的假设,直接生成三个概念。用户反馈后再迭代。

概念检查点——在构建套件前展示标志。 每次设计运行在概念构建并测试后暂停:展示概念表,每个概念一行,附上你的推荐,然后提供完整套件并等待。只有用户明确表示无需确认,或在无人值守的AIO运行中(此时构建推荐的概念并报告其他概念)才跳过暂停。

设计工作流程

1. 简报

名称(准确的拼写和大小写)、业务内容、受众、3-5个品牌形容词、竞争对手、约束条件(颜色、需要保留的资产、使用场景:招牌、刺绣、应用图标、社交头像)、文字体系(拉丁/西里尔/两者兼有)。形容词将转化为视觉线索。撰写五行简报并列出假设。

2. 研究与策略

  • 品类扫描:search.py "<行业>" -d logo-industry 以及你对品类的了解——明确列出其陈词滥调(金融科技:蓝色、向上箭头、盾牌、地球;咖啡:咖啡豆、蒸汽、杯子;牙科:牙齿;房地产:屋顶)。除非赋予真正新颖的形式,否则禁止使用。
  • 字标图(references/concepts.md §3):名称、卖点、形容词、承诺 → 名词、隐喻、反义词;圆圈交叉点。
  • 使用决策指南(references/concepts.md §1)选择候选标志类型。探索至少两种类型。

3. 概念

编写8-12个一句话概念,涵盖不同标志类型和概念方法(字母组合+含义、产品动作、隐喻融合、负空间、建构几何——references/concepts.md §2)。每个概念都需要一个可拥有的转折;一个可能描述竞争对手标志的句子不是概念。快速评分(创意清晰度、独特性、简洁性、相关性、小尺寸强度);选择三个最强且差异最大的。检查是否有任何概念重现了知名标志。

4. 以SVG构建(先黑白)

先用语言描述构建(图元、半径、角度、网格单位),然后编写SVG(references/svg-construction.md):符号用 viewBox="0 0 256 256"(组合图保持高度256),白底纯黑,精确角度(0/15/30/45/60/90°),一致的描边宽度和半径,圆形几何使用弧线,锚点少,使用 fill-rule="evenodd" 实现真正的孔洞(用于计数器和负空间——颜色形状上的白色形状无法通过单色测试),字母形式构建为路径(最终文件中不得使用 <text>)。保存每次迭代(a-v1.svg、a-v2.svg)。

5. 测试与优化(至少两轮)

python3 <root>/scripts/logo_kit.py audit a.svg b.svg c.svg
python3 <root>/scripts/logo_kit.py sheet a.svg b.svg c.svg --names "A" "B" "C" --brand "#hex" --out logo-test.html
node <root>/scripts/render.cjs shots logo-test.html --widths 1440 --no-full --out .astudio/logo
node <root>/scripts/render.cjs svg a.svg --sizes 16,32,512 --out .astudio/logo/a

打开PNG并仔细观察——在SVG中绘制如同盲绘。修复失败项:16像素可辨性、单色和反白版本、眯眼剪影、镜像/180°解读(意外的字母、身体部位、冒犯性或政治性符号)、光学修正(曲线过冲1-3%,尖锐点更多;胶囊上的骨形效果;水平线条更细;光学中心略高于几何中心;反白版本更细)、字母测试(每个修改后的字母仍可识别)、连接处(无缺口、碎片、凸起)、同行测试(与相同尺寸的优秀标志并列时同样精致)、字面性(咖啡馆用咖啡杯不是概念)。完整列表:references/testing.md。

6. 检查点——展示概念

在表格上展示每个概念两次:黑色(评估形式)和建议配色(1-2种品牌色+背景色)(应用于标志和组合图,再加上一个实际场景,如应用图标或标牌)。从每个概念自身创意和 search.py -d logo-color 中选取颜色,用 palette.py 检查对比度;标注为建议——最终调色板将在套件中确定。全黑表格对客户而言看起来未完成。使用 python3 <root>/scripts/logo_kit.py concepts a.svg b.svg c.svg --names A B C --colors "#fg/#bg" "#fg/#bg" "#fg/#bg" --lockups a-lockup.svg b-lockup.svg c-lockup.svg --recommend C --out concepts.html 构建表格,渲染并查看。消息格式:

<概念表图片:每个概念黑色行+颜色行>
### A — <名称> · <标志类型>   ← 推荐
创意:<一句话>      颜色:<#hex + #hex,原因>      为什么适合:<2-3个要点,与形容词/受众/竞争相关>      风险:<诚实>
### B — … / ### C — …
下一步:选择一个方向(或告诉我你喜欢每个概念的哪些部分)。需要完整标志套件吗?
(套件 = 调色板 + 单色/反白、水平与堆叠组合图、小尺寸裁剪、favicon/应用/网页图标、使用指南、样机)

7. 构建套件(确认后)

  1. 优化选定方向:最终几何、光学修正、小尺寸裁剪(更少元素、更粗描边、更大间隙)、反白版本加粗。
  2. 色彩:1-2种颜色,在品类中可拥有,可访问,可复现(HEX/RGB + CMYK和Pantone建议,标注“需与印刷商确认”);单色和灰度版本必须依然有效。使用 palette.py info|contrast 检查。
  3. 字体与组合图:字标为自定义/轮廓字母形式(字体许可证必须允许标志使用——Google Fonts OFL 可以)、光学间距、水平/堆叠/仅符号/仅字标,具有固定比例和间隙(间隙 = 标志的某个定义单位,例如计数器宽度)。
  4. 导出:logo_kit.py variants mark.svg --mono "#hex" --icon-bg "#hex" --name <品牌>;logo_kit.py webicons <品牌>-small.svg --name <品牌> --bg "#hex";render.cjs svg 生成PNG尺寸。
  5. 演示:在4-6个与该业务相关的上下文中展示标志(咖啡馆:杯子、招牌、菜单、袋子;开发工具:README页头、终端、应用图标、会议胸牌)——用HTML/CSS构建并渲染;外加构造图、安全空间/最小尺寸规则。references/kit.md §1-2。
  6. 一页指南:安全空间(以标志元素为单位)、最小尺寸(px和mm)、颜色代码、允许的背景、误用示例。如需完整品牌套件,转交 astudio-aio:brand。

原则

先问谁/什么/为什么 · 标识而非解释 · 简洁但不平淡(简化到清晰为止,然后添加一个可拥有的细节) · 相关,而非字面 · 与品类区分 · 一个可在一句话内解释的创意 · 在16像素和16米、单色、反白、刺绣中均能工作 · 经典胜过潮流(一个概念,而非效果) · 系统的基础(图案、图标、动感源自于此) · 工艺至关重要(几何、光学修正、间距) · 坚定,而非固执。

红旗——在展示任何内容前修复

未经变形的剪贴画字面意义或品类陈词滥调 · 未修改的库存字体中的首字母缩写 · 无理由使用超过三种颜色 · 用渐变/阴影/滤镜挽救弱形态 · 细节小于标志的1/48、发丝线、小尺寸时闭合的间隙 · 接近但不精确的角度、不均匀曲线、不一致描边 · 最终文件中使用实时的 <text>、光栅图、滤镜、遮罩 · 需要一个段落解释的概念 · 任何与现有标志相似的内容。

诚信

你无法保证商标清查——建议专业搜索(国家商标数据库 / WIPO全球品牌数据库、反向图片搜索)。说明字体许可证假设。如果你无法渲染并查看,请如实说明,并保持几何形状格外简单。绝不要使用AI图像生成来制作标志、情绪板或样机:主文件是你编写的矢量代码,样机用HTML/CSS/SVG绘制或合成到免费的库存照片上(注明出处)。

Individual skills in this repo

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

whoamnesia/brand

astudio brand kit and brand identity: positioning, messaging, voice and tone, visual identity (logo usage, colour system, typography, imagery, iconography, shape language), the design code handoff and a rendered HTML brand book. Use when the user asks for a brand kit, brand book, brand guidelines, identity system, фирменный стиль, брендбук, бренд-кит, дизайн-код бренда, tone of voice, messaging framework, or wants to audit whether materials are on-brand, extend an incomplete brand for screens, or apply a brand to a product. Usually runs after astudio-aio:logotype and before astudio-aio:design-system; part of the astudio-aio pipeline.

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/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.

相关技能