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.
npx skills add julilaoshi/julilaoshi-design --skill skillgit clone --depth 1 https://github.com/julilaoshi/julilaoshi-designWrote 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/skills/julilaoshi/julilaoshi-design/skill)<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.
<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>- NVIDIA SkillSpector pass
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.00068 | $0.03067 |
| Opus 5 | $0.00034 | $0.01533 |
| Sonnet 5 | $0.00014 | $0.00613 |
| Haiku 4.5 | $0.00007 | $0.00307 |
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 10d 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 — 344 lines — stays where its author put it; the contents beside it link to each section on GitHub.
julilaoshi-design
Overview
- This is a public-safe execution skill for official Pencil users.
- It also includes julilaoshi-design Web 2.0, a small free static HTML editor for browser-first visual tweaking.
- It is unofficial and does not grant redistribution rights for Pencil.
- Pencil MCP mode assumes every user installs Pencil from the official source on their own machine.
- Web 2.0 mode does not require official Pencil, npm installs, or a build step.
- It handles execution discipline, not whole-page design strategy.
- It becomes much stronger when paired with
takeaway-skilland enough reference data.
Use This Skill When
- the user says
Pencil,.pen,Pencil MCP,screenshot review, orcontinue in Pencil - the user says
julilaoshi-design Web,Web 2.0,HTML editor,design-to-HTML, or asks for browser-based visual tweaking - a task has already entered
.penediting, canvas changes, or Pencil MCP execution - a task needs a lightweight public HTML editor with right-side controls, drag/resize/rotate, and export
- you need public-safe handshake, canvas reads, batch edits, screenshot review, or lock-safe patches
- you are releasing a public repo and need the Pencil layer to stay useful without leaking private assets
Do Not Use This Skill For
- deciding the whole page concept, page skeleton, or product architecture
- deciding what a reference is worth taking without upstream distillation
- bundling or redistributing official Pencil
- promising the Web 2.0 editor is a full Figma, Illustrator, or internal julilaoshi-design replacement
- shipping activation files, tokens, or account state
- leaking internal benchmark packs or private case libraries
- redistributing third-party paid tools without clear permission
- presenting an unofficial repo as if it were the official Pencil project
Core Rules
- Keep the official dependency external.
- Choose the mode first:
Pencil MCPorjulilaoshi-design Web 2.0. - If the user has not clearly chosen a mode, ask the mode question before editing anything.
- Reply in the user's language unless they ask otherwise.
- In Pencil MCP mode, handshake first, then work.
- In Web 2.0 mode, verify the static HTML opens locally before editing behavior.
- Read structure before editing.
- Batch when possible, do not fragment edits.
- Locked pages get only surgical changes.
- Always verify with a screenshot or equivalent review step.
- Public repos ship method, templates, and checks, not the whole moat.
- Never commit tokens, local paths, machine-specific state, or private screenshots.
- Third-party tools and assets must follow their own licenses.
- When references matter, use
takeaway-skillfirst instead of guessing strategy inside the execution layer.
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.
- 10d ago First seen · 344 lines · 68 tokens per session scan A 674bfc90a54d
julilaoshi-design is a skill published in the GitHub repository julilaoshi/julilaoshi-design (119 stars, last pushed 20d ago), licensed MIT. It adds 68 tokens to every session and 3,067 once invoked, about $0.0003 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 skills, from other repositories
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…
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…
frontend-patterns
CSS design system principles -- token usage, semantic layering, mobile-first, component isolation.
ai-ui-ux-motion-engine
Design, redesign, build, audit and validate distinctive production websites with cinematic scroll reveals, product films, burst or exploded-view effects, reference-led design systems, purposeful motion and multi-pass refinement. Use for landing pages, product sites, portfolios, interactive storytelling, premium or…
redesign-codex-ui
Redesign and locally modify an existing Codex desktop or web interface from reference images, a user persona, a celebrity, idol, actor, musician, fictional character or original IP theme, a visual style, or a combination of these inputs. Use when Codex needs to inspect a local Codex installation or source checkout…
ai-ui-ux-motion-engine
Design, redesign, build, audit and validate distinctive production websites with cinematic scroll reveals, product films, burst or exploded-view effects, reference-led design systems, purposeful motion and multi-pass refinement. Use for landing pages, product sites, portfolios, interactive storytelling, premium or…