julilaoshi-design

julilaoshi-design is a skill for Codex from julilaoshi/julilaoshi-design. It costs 52 tokens per session (612 once invoked), scanned A, original, MIT.

A workflow for editing Pencil designs and making small browser-based changes to HTML pages. Pencil is a visual design tool, and HTML is the code used to structure web pages.

In plain words
What is it for?
Use it for .pen files, Pencil MCP tasks, screenshot review, drag-and-resize HTML editing, and exporting a lightweight web page.
Why use it?
It provides a defined process for canvas edits, screenshot checks, and safe changes when working with Pencil files or the included web editor.

Skill for Codex

Written for Codex: agents/openai.yaml present.

Good fit Use it for .pen files, Pencil MCP tasks, screenshot review, drag-and-resize HTML editing, and exporting a lightweight web page.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/julilaoshi/julilaoshi-design/skill
Install

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.

Any agent
npx skills add julilaoshi/julilaoshi-design --skill skill
Clone the repo
git clone --depth 1 https://github.com/julilaoshi/julilaoshi-design

Made for: Codex.

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

agentmods badge for julilaoshi-design

README.md
[![agentmods](https://agentmods.dev/badge/skills/julilaoshi/julilaoshi-design/skill/github.svg)](https://agentmods.dev/skills/julilaoshi/julilaoshi-design/skill)
Your own site
<a href="https://agentmods.dev/skills/julilaoshi/julilaoshi-design/skill"><img src="https://agentmods.dev/badge/skills/julilaoshi/julilaoshi-design/skill/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

agentmods 80×15 button for julilaoshi-design

Your own site · 80×15
<a href="https://agentmods.dev/skills/julilaoshi/julilaoshi-design/skill"><img src="https://agentmods.dev/badge/skills/julilaoshi/julilaoshi-design/skill.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 52 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 612 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe. Third-party audits
  • NVIDIA SkillSpector pass 7 Sept 2026
How audits are shown
Origin original No closer match found in the catalogue.
Token cost

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.

ModelPer sessionOnce invoked
Fable 5.1 $0.00052 $0.00612
Opus 5.5 $0.00021 $0.00245
Sonnet 5.5 $0.00010 $0.00122
Haiku 4.5 $0.00005 $0.00061

Measured 1mo ago against content hash 9ab501f1a905, method: parsed. Prices are Anthropic first-party input rates as of 2026-10-07, from the pricing page.

Security

Grade A, and why

julilaoshi-design 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 1mo 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.

skill/SKILL.md · 32 lines

How it starts

The opening of the file, as written. The whole thing — 32 lines — stays where its author put it; the contents beside it link to each section on GitHub.

julilaoshi-design

Produce the user's requested editable design and a verified preview. Affinity and HTML are the primary routes; Pencil is a compatibility option. Use the user's own content and visual preferences, together with ordinary design judgment. No other design skill, private library or author-specific style is required.

Choose the route

  • Existing Affinity document or requested native vector editing: read Affinity. Check the installed application version and the tools actually available.
  • Browser-based design or HTML output: read HTML. A standalone page can be authored directly; the optional bundled editor is in the full repository's web/ directory.
  • Existing .pen file or explicit Pencil request: read Pencil.
  • Preserve a requested format. Infer the route from the request and source; ask one short question only if a missing choice materially changes the result. Never switch an existing native file to HTML without a reason agreed with the user.
  • Other desktop editors require their own verified tool access and sample-file test. Do not advertise Illustrator support as tested.

Work

  1. Read the actual source. Determine the message, audience, size, output format, editable parts and protected objects from available context. Only ask for information that changes the result.
  2. Build a useful first draft or apply the requested local correction. Choose hierarchy and layout for this user's content; avoid inventing facts, forcing a house style or moving approved objects.
  3. Use available computer-use tools or a verified application interface. Read the current document and selection before editing. Follow current tool documentation, without requesting broader permissions just to reduce prompts.
  4. Work in a recoverable copy when testing or changing file format. Keep native source files separate from previews and generated interchange files.
  5. Inspect the full result and affected detail for text clipping, overlap, wrong objects, missing resources and unintended changes. Save to the actual requested path; reopen or read back when persistence is part of the task.
  6. Deliver source and preview/export as requested. State what was changed, what was actually verified and any remaining limitation. A successful tool call or changed file hash alone is not visual validation.

Read the full file on GitHub · 32 lines

Files

What ships with it

4 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.

Changes

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.

  1. 1mo ago Changed · -312 lines · -16 tokens per session 9ab501f1a905
  2. 1mo ago First seen · 344 lines · 68 tokens per session scan A 674bfc90a54d

Subscribe to this mod's changes

julilaoshi-design is a skill published in the GitHub repository julilaoshi/julilaoshi-design (121 stars, last pushed 1mo ago), licensed MIT. It adds 52 tokens to every session and 612 once invoked, about $0.0002 per session on Opus 5.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.

Related

Other skills, from other repositories

ui-html-renderer

Use this specialist for unusually complex stateful HTML, blank/runtime-risk repair, strict source-to-HTML fidelity, reusable component galleries, brand boards, or detailed implementation handoff. Ordinary single-page HTML uses ui-design-executor, which already preserves HTML-default delivery and baseline…

Orkas-AI/Orkas · 4 tokens

product-ui

Use this skill when UI design and UI implementation should happen together. It turns product context into usable frontend screens, components, layout decisions, design-system choices, accessibility rules, and visual polish.

Orkas-AI/Orkas · 2 tokens

design-engineering

Premium design engineering skill for agentic workflows — produces high-end, distinctive UI designs using DESIGN.md as the portable contract across Pencil MCP (in-IDE canvas), Figma MCP (team handoff + design tokens), and Google Stitch (vibe exploration + AI generation). Enforces anti-generic principles, WCAG 2.2 AA…

broomva/skills · 231 tokens

frontend-taste

Premium frontend design skills that override LLM defaults. Prevents generic 'AI-looking' UI. Enforces deterministic typography, calibrated color, asymmetric layouts, spring physics, hardware-accelerated motion. Triggers: 'UI tasarla', 'design a UI', 'premium landing page', 'frontend taste', 'anti-slop', 'dashboard…

fatihkan/badi · 0 tokens

frontend-patterns

CSS design system principles -- token usage, semantic layering, mobile-first, component isolation.

Jartan-LLC/grimoire · 21 tokens

design-tokens

Project-level DESIGN.md tokens reference. When the project has a DESIGN.md file, agents producing UI / components / visuals must consult this skill to use canonical color/typography/spacing tokens rather than inventing new ones. Triggers on: UI generation, component creation, design brief, visual asset, tailwind…

fatihkan/badi · 0 tokens