メニュー
Apply opinionated modern visual taste — fluid type, generous whitespace, OKLCH palette, no Tailwind cliches. Load whenever the user asks for landing pages, marketing sites, hero sections, dashboards, or "make this look good".
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Build a visual artifact (dashboard, chart, table, page, mini-app) the RIGHT way — generate it, render it, screenshot it, have a vision model review it (LOOKS_GOOD / NEEDS_WORK / BROKEN), fix until it actually looks right, then serve it live with hot-reload. Load whenever the user asks to build/make a dashboard, chart, table, landing page, report UI, or any visual web artifact — especially over the Telegram/Discord bot, where the result is shown as a screenshot + Approve/Edit/Reject card.
Produce a standalone, versioned deliverable (web page, React/Vue component, SVG, diagram, doc) the user will keep and iterate on. Use the built-in artifact_* tools — NOT write_file — so the artifact is versioned, undoable, and previewable in a real browser. Load whenever the user asks for "an artifact", "a file", "a mockup", "a component", a one-off page, a chart, or anything they'll take away and refine.
Senior advertising creative director, scriptwriter, and video editor. Takes a product/brand + goal and runs the full pipeline — research the market, write a hook-driven ad script, break it into a shot-by-shot storyboard, generate each sequence with Higgsfield (image/video/Marketing Studio/Soul), then assemble all sequences into a finished, platform-ready cut with ffmpeg (concat, music, aspect-ratio, transitions). Load for ad/commercial creation, video ads, UGC scripts, storyboards, scene generation, or final video assembly/editing.
Senior backend architect for Django, Node (Express/Nest/Fastify), and API design (REST/GraphQL/DRF/FastAPI). Designs the architecture FIRST (layers, data model, API contract) and writes it down, then builds in clean vertical slices, then leaves the system auditable so it can be upgraded and debugged later. Load whenever the user starts, designs, refactors, reviews, or debugs a backend, an API, a database schema, models/ORM, migrations, or server-side services.
Master engineer of robust, ethical, production-grade Python data-collection bots for business intelligence — price/competitor monitoring, market research, lead/data enrichment, feed ingestion. Picks the RIGHT method (official API first, polite public scrape last), engineers for resilience (incremental, idempotent, backoff, caching, schema validation, change detection), and runs on a schedule. Refuses fragile/abusive tactics (ban-evasion, CAPTCHA bypass, auth-walled or personal-data harvesting). Load whenever the user wants to build a scraper, crawler, data-collection bot, price/competitor monitor, market-intel pipeline, or recurring ingestion job in Python.
Emil Kowalski's signature UI style — buttery smooth spring animations, deliberate micro-interactions, minimal but high-impact visuals, framer-motion mastery. Load when the user wants "that craft-level polish", Vercel/Linear-aesthetic components, or smooth page transitions.
| name | taste |
| description | Apply opinionated modern visual taste — fluid type, generous whitespace, OKLCH palette, no Tailwind cliches. Load whenever the user asks for landing pages, marketing sites, hero sections, dashboards, or "make this look good". |
| version | 0.1.0 |
| author | QodeX |
| triggers | ["frontend","landing","hero","design","ui","css","tailwind","زیبا","طراحی","فرانت"] |
| slash-aliases | ["taste"] |
| allowed-tools | ["read_file","write_file","edit_text","edit_symbol","multi_edit","multi_file_edit","ls","glob","grep","bash","detect_frontend_stack","analyze_design_system","find_ui_components","design_audit"] |
| files | ["palette.md","typography.md"] |
The user wants the page/component to FEEL premium. Follow these rules unless they explicitly override one.
4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 / 128. Don't use 13px, 27px, etc.max-width: 1200px for content sites, 1440px for dashboards, 680px for long-form text. Center with margin-inline: auto; padding-inline: clamp(16px, 4vw, 32px).padding-block: clamp(64px, 12vw, 160px). Never py-12 everywhere — it's flat.See typography.md for the full table. Default stack:
clamp() everything. Hero clamp(2.5rem, 6vw, 5.5rem), body clamp(1rem, 1.1vw, 1.125rem).letter-spacing: -0.02em). Body stays at 0.1.05–1.1, body 1.6–1.7, UI 1.4.oklch(0.62 0.18 264) is more controllable than #5B5BD6.oklch(0.99 0 0) background, oklch(0.18 0 0) text.palette.md for ready-to-paste ramps.0 24px 60px -20px oklch(0 0 0 / 0.15) for floating cards.1px solid oklch(0.92 0 0). Avoid border-gray-200 cliches — pick the lightness yourself.backdrop-filter: blur(14px) saturate(140%) + a translucent oklch(1 0 0 / 0.6) fill.background-position on hover. Mesh gradients > linear.cubic-bezier(0.16, 1, 0.3, 1) (a.k.a. easeOutExpo). NOT ease-in-out.@media (prefers-reduced-motion: reduce).purple-to-blue gradients without a reason.#000 on #FFF for hero body text — feels harsh. Use oklch(0.18 0 0) on oklch(0.99 0 0).text-center everything. Left-align long-form unless the line is < ~25ch.box-shadow: 0 4px 6px rgba(0,0,0,0.1) (Tailwind default). Make a real one.design_audit the page — contrast, hierarchy, spacing scale.browser_screenshot if a dev server is up.prefers-color-scheme if a dark theme exists.If a constraint here contradicts an explicit user instruction, the user wins.