logo-banner
Create cohesive raster logo, app-icon, favicon, and repository-hero systems through ChatGPT Image when a user asks to design or refresh visual identity, a logo, a banner, branding assets, or light and dark brand variants; stop clearly when the host lacks that generator rather than substituting another tool; not for code-drawn SVG icons, general website layout, or ordinary photo retouching.
- Group
- Brand
- Version
- 0.8.4
- Licence
- MIT
Install
/plugin install brand@misoto22Then invoke the skill with:
/brand:logo-bannerWhen it fires
The prompts CI scores this skill against — so they cannot drift from what it actually does.
Fires on
- Design a logo and GitHub banner for my new personal knowledge app.
- 帮我给这个项目设计一套日系极简 logo、favicon 和 README banner。
- The light Hero exists. Please make a matching dark-mode brand banner and put it in the README.
Stays out of
- Make the cards on this landing page line up better on mobile.
- Convert this existing SVG icon to inline HTML so I can animate it.
Logo Banner
Create a small, coherent raster identity system through ChatGPT Image, from a confirmed visual direction to approved project assets.
Establish the direction first
- Inspect the project before proposing a look. Identify its name, purpose, audience, existing visual language, primary surfaces, and any non-negotiable constraints. Do not invent product facts.
- If a complete direction is not already supplied, offer exactly three compact, project-specific directions. Each must name a mood, palette, motif, and typographic character. Ask the user to select or amend one.
- Restate the selected direction as a short art-direction brief covering the intended uses, light/dark support, palette, motifs, typography, exact copy, and explicit avoid list. Ask for confirmation before generating anything.
- Treat an existing style preference as a proposed direction, not approval. Confirm it and the required assets before generation.
Do not make visualization or intensive questioning a gate. If a visualization capability or GrillMe is installed, offer it as an optional way to compare directions or resolve a genuinely open decision. Continue without either when the user can choose a style directly.
Generate only with ChatGPT Image
Before generating or promising an asset, verify that the current host exposes the built-in ChatGPT Image generator. If it does not, explain that this skill needs that capability and stop. Do not claim that an image was generated, substitute another generator, or offer an SVG, code-drawn, or stock-asset fallback.
Use the built-in ChatGPT Image generator for every logo, mark, app icon, favicon source, banner, pattern, or in-image wordmark. Never replace it with SVG, Canvas, HTML, CSS, Mermaid, manually drawn shapes, a stock asset, or a different image generator.
- Start from a composition that is simple enough to survive a 32 px browser tab. A favicon or app icon uses the distinctive symbol alone, never a full wordmark.
- Write a production prompt that names the use case, visual direction, palette, placement, exact text, and constraints. When text is required, quote it verbatim and require it to be legible and correctly spelled.
- For a revision, provide the current raster as the edit target and list the invariants. Change only the requested region or property.
- Build a dark variant by editing the approved light composition, or vice versa. Lock the layout, scale, motifs, copy, and hierarchy; change only the surface, contrast, and palette needed for the second appearance.
- Iterate with one targeted change at a time. If ChatGPT Image cannot reproduce critical in-image text faithfully after two focused edits, show the drafts and ask for direction. Do not create a code or SVG workaround.
- Use ordinary raster cropping or resizing only to derive delivery sizes from an approved generated raster. Do not use code to draw, trace, or typeset a mark.
Deliver a usable system
Match the asset list to the request. When a complete repository identity is requested, propose this compact pack before producing it:
- full logo concept for presentations and references;
- app-icon master and a 512 px app icon;
- 32 px favicon that remains recognizable at tab size;
- light and dark social/README Hero banners when the project supports both;
- optional low-contrast background pattern.
Keep the same asset family across every output: one core symbol, restrained palette, compatible texture, and consistent type treatment. Reserve open space in a social banner for copy. Put bilingual copy on separate lines, preserve it exactly across themes, and keep it away from the symbol and crop edges.
Inspect and integrate
- Inspect every generated result at full size. Inspect icons again at their intended small size. Check silhouette, contrast, edge quality, exact text, and absence of watermarks or unintended objects.
- Compare light and dark banners side by side. Reject any pair whose composition or wording diverges rather than merely adapting its contrast.
- Present the selected generated assets and ask for explicit approval before integration. Style confirmation and a pre-generation request such as “put it in the README” do not count as approval of the generated output. Do not replace project assets, edit a README, or publish changes until the user gives that separate approval.
- Save explicitly approved raster files in the project's established asset location; use
assets/brand/only when the project has no better convention. Record each asset's intended use and palette in a short asset guide. - When asked to use a Hero in a README, use a
<picture>element so light and dark banners switch byprefers-color-scheme. Keep the README title only when it adds information that the Hero does not already carry. - Report the saved asset paths, the final ChatGPT Image prompt or prompts, and the visual checks performed. Follow the repository's normal validation and publishing process only when the user asks to ship the changes.