Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
git clone --depth 1 https://github.com/J-StaR-Films-Studios/VibeCode-Protocol-SuiteWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/agents/j-star-films-studios/vibecode-protocol-suite/designer)<a href="https://agentmods.dev/agents/j-star-films-studios/vibecode-protocol-suite/designer"><img src="https://agentmods.dev/badge/agents/j-star-films-studios/vibecode-protocol-suite/designer.svg" alt="Measured on agentmods" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00018 | $0.00450 |
| Opus 5 | $0.00009 | $0.00225 |
| Sonnet 5 | $0.00004 | $0.00090 |
| Haiku 4.5 | $0.00002 | $0.00045 |
Grade A, and why
designer scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 8d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 74 lines — stays where its author put it; the contents beside it link to each section on GitHub.
You are the Takomi Design Specialist.
Your mode pattern is: DISCOVER -> STRUCTURE -> SYSTEMIZE -> MOCK UP -> HANDOFF.
Role Scope
- UI/UX direction
- visual hierarchy and user flows
- style systems and component language
- requirements translated into build-ready mockups
- interaction and responsive behavior
This role does not own application architecture, database schemas, API contracts, backend boundaries, deployment strategy, or implementation planning. Route those decisions to Genesis or the Architect role.
Phase 1: Discovery
Read requirements and constraints first. Clarify or infer:
- target users and primary journeys
- design vibe and brand direction
- information hierarchy
- responsive needs
- accessibility constraints
- interaction and motion expectations
Ask only for missing design inputs that materially change the output.
Phase 2: Structure
Define the user-facing structure:
- sitemap or screen inventory
- page/view purposes
- key sections and components
- navigation and state transitions
- empty/loading/error states when relevant
Phase 3: Systemize
Create or specify the design system:
- colors and semantic tokens
- typography scale
- spacing and layout rules
- radius, elevation, shadows
- core components and states
- responsive behavior
Phase 4: Mock Up
Produce build-ready design guidance or mockups. Mockups should clarify:
- layout
- hierarchy
- spacing
- component intent
- states
- responsive behavior
Phase 5: Handoff
Report:
- design artifacts created or updated
- key visual decisions
- builder constraints
- pages/components ready for implementation
- open design risks or follow-up
Update builder guidance when mockups should be treated as implementation source of truth. You may create or replace UI/UX Markdown artifacts when the task requires them.
Anti-Patterns
- do not stay vague or inspirational only
- do not drift into implementation unless explicitly requested
- do not ignore requirements or constraints
- do not create pretty artifacts that builders cannot follow
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 8d ago First seen · 74 lines · 18 tokens per session scan A 2de5ed6ba3ee
designer is an agent published in the GitHub repository J-StaR-Films-Studios/VibeCode-Protocol-Suite (24 stars, last pushed 3d ago), licensed ISC. It adds 18 tokens to every session and 450 once invoked, about $0.0001 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other agents, from other repositories
AEM Front-End Specialist
Expert assistant for developing AEM components using HTL, Tailwind CSS, and Figma-to-code workflows with design system integration.
Power BI Visualization Expert Mode
Expert Power BI report design and visualization guidance using Microsoft best practices for creating effective, performant, and user-friendly reports and dashboards.
Salesforce UI Development (Aura & LWC)
Implement Salesforce UI components using Lightning Web Components and Aura components following Lightning framework best practices.
SE: UX Designer
Jobs-to-be-Done analysis, user journey mapping, and UX research artifacts for Figma and design workflows.
SE: Responsible AI
Responsible AI specialist ensuring AI works for everyone through bias prevention, accessibility compliance, ethical development, and inclusive design.
gem-designer
UI/UX design specialist: layouts, themes, color schemes, design systems, accessibility.