{"id":74430,"date":"2026-07-03T21:00:41","date_gmt":"2026-07-03T13:00:41","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=74430"},"modified":"2026-06-30T18:04:45","modified_gmt":"2026-06-30T10:04:45","slug":"ai-skills-coding-agent-design","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/ai-skills-coding-agent-design\/","title":{"rendered":"10 AI Skills to Give Your Coding Agent Real Design Taste"},"content":{"rendered":"

AI coding agents can write functional code. But getting them to produce something that also looks<\/em> good is hard<\/strong>. The default output tends toward purple gradients, rounded corners, and Inter font everywhere, and layouts that check boxes without conviction. This isn\u2019t the agent\u2019s fault. It has no sense of taste.<\/p>\n

Enter AI skills.<\/strong> These are markdown files<\/a> you install into Claude Code<\/a>, Codex<\/a>, Cursor<\/a>, or any agent that supports them.<\/p>\n

Below I\u2019ve collected some design-focused AI skills and skill directories that I think are worth adding to your AI agent. Once installed, it will teach your agent a specific design language from Swiss grid systems to OKLCH color science<\/a>.<\/p>\n

So let\u2019s take a look at each skill and what it could bring to your agent\u2019s design vocabulary.<\/p>\n

1. OKLCH Color Skill<\/a><\/h2>\n
\"OKLCH<\/figure>\n

OKLCH Color Skill<\/strong> teaches your agent to work with the OKLCH color space, a perceptually uniform alternative to HSL that eliminates hue drift and makes palette generation predictable.<\/p>\n

Instead of guessing hex values or producing muddy HSL combinations, the agent learns to convert between formats, generate uniform palette scales from 50 to 950, derive dark mode colors through lightness manipulation, check contrast against WCAG 2<\/a> and APCA<\/a> standards, and build Tailwind<\/a> v4 themes with proper OKLCH tokens.<\/p>\n

Install:<\/strong> npx skills add jakubkrehel\/oklch-skill<\/code><\/p>\n

Use:<\/strong> \/oklch-skill<\/code> or just describe a color task. The skill activates automatically when the agent encounters color-related work.<\/p>\n

If your project uses custom design tokens or you\u2019re tired of agents producing color combinations that look fine in isolation but fall apart on dark mode, this skill is a solid fix.<\/p>\n

2. Swiss Design System Skill<\/a><\/h2>\n
\"Swiss<\/figure>\n

Swiss Design System<\/strong> brings the Swiss International Style to AI agents. The skill teaches grotesque sans-serif typography<\/a> such as Helvetica, Univers, Neue Haas Grotesk, along with strict grid systems, generous whitespace, and restrained color.<\/p>\n

It expresses these principles through Tailwind CSS so the agent can apply these rules using standard utility classes. The skill includes a complete font specimen ranking by fidelity to the original style, grid system references from Josef Mueller-Brockmann<\/a>, and data on both the Zurich and Basel schools of thought.<\/p>\n

Install:<\/strong> npx skills add zeke\/swiss-design-skill<\/code><\/p>\n

Use:<\/strong> Ask your agent to build a layout in Swiss International Style. It will apply grid discipline, select appropriate grotesque typefaces, and maintain breathing room around content automatically.<\/p>\n

Great for landing pages, editorial layouts, and any project where clarity and visual hierarchy matter more than decorative flourish.<\/p>\n

3. Transitions.dev<\/a><\/h2>\n
\"Transitions.dev\"<\/figure>\n

Transitions.dev<\/strong> is a collection of nine essential UI transitions packaged as a copy-paste showcase and an installable agent skill. The transitions cover card resize, number pop-in with digit flip and blur, notification badge diagonal slide, and a lot more \u2013 each comes with ready-to-use CSS that agents can apply directly in your project.<\/p>\n

The skill is generated from the index.html<\/code> on the showcase site, so the code your agent produces always matches what you see demonstrated. If you\u2019ve ever had an agent produce a modal that pops in from nowhere with no transition, this skill fixes that.<\/p>\n

Install:<\/strong> Clone the repo or reference the skill from github.com\/Jakubantalik\/transitions.dev<\/a><\/p>\n

Use:<\/strong> Mention any of these transition patterns and the agent applies the pre-optimized CSS.<\/p>\n

4. DESIGN.md Directory<\/a><\/h2>\n
\"DESIGN.md<\/figure>\n

A directory of DESIGN.md files<\/strong> built specifically for AI coding agents. Each file describes a complete design system including color palettes, typography rules, spacing systems, component specs, and layout principles. Pick a style, copy the markdown, and add it to your project as a DESIGN.md<\/code> file. Your agent reads it and applies that design language to everything it builds from buttons to full page layouts.<\/p>\n

Use:<\/strong> Browse the directory, find a design system that matches your aesthetic, download or copy the DESIGN.md<\/code>, and place it in your project root. The agent picks it up automatically without additional configuration.<\/p>\n

This is the lowest-friction option on the list: no CLI, no npm, no install command. Just a markdown file in your project.<\/p>\n

5. Agents with Taste<\/a><\/h2>\n
\"Agents<\/figure>\n

Agents with Taste is an installable design engineering skill by Emil Kowalski that covers animation principles, component design, easing curve selection, duration guidelines, typography rules, and practical tips drawn from his open source projects.<\/p>\n

The skill includes a table of practical tips, an easing decision flowchart that teaches agents exactly which curve to use based on context, duration guidelines from micro-interactions (100-150ms) to modals (200-300ms), and strict typography rules like capping body text at 65 characters.<\/p>\n

Install:<\/strong> npx skills add emilkowalski\/skill<\/code><\/p>\n

Use:<\/strong> Ask the agent to improve an animation or design a component. The skill applies Emil\u2019s personal design philosophy automatically. You can also use the skill-creator<\/a> skill from Anthropic to package your own taste into skill files using the same methodology.<\/p>\n

6. Hue<\/a><\/h2>\n
\"Hue\"<\/figure>\n

The Hue app<\/strong> is an open-source skill by Dominik Martin that learns any brand from a URL, name, or screenshot and generates a complete design system from it. You point it at Cursor.com<\/a> or Raycast<\/a> or any brand, and it produces a design system with color tokens, typography, spacing, components, dark mode support, and icon recommendations.<\/p>\n

Hue comes with 17 example brands built in, from Atlas (ivory engineering, classical maritime) to Velvet (noir editorial fragrance house). Each includes a design-model.yaml<\/code> and a landing-page.html<\/code> showing the system rendered.<\/p>\n

Install:<\/strong> git clone https:\/\/github.com\/dominikmartn\/hue ~\/.claude\/skills\/hue<\/code><\/p>\n

Use:<\/strong> \u201cMake a design skill from cursor.com\u201d or \u201cCreate a design language inspired by Raycast.\u201d The agent walks through the analysis and generates the skill.<\/p>\n

If you need your agent to match an existing brand identity instead of inventing its own, this is the most practical option.<\/p>\n

7. Refero Styles<\/a><\/h2>\n
\"Refero<\/figure>\n

Refero Styles<\/strong> is a visual search engine for design references and an installable agent skill. Search by brand, mood, color, typography, or paste a URL. For each result, Refero provides the full style breakdown: colors, type, spacing, components, and a DESIGN.md<\/code> file your agent can use directly. Under the hood, the skill gives your agent access to 150,000+ real app screens and 6,000+ user flows from products like Stripe<\/a>, Linear<\/a>, Notion<\/a>, and Figma<\/a>.<\/p>\n

Use:<\/strong> Search for a style that matches what you\u2019re building. Open any result to copy its DESIGN.md<\/code> and place it in your project. Your agent instantly adopts that design language.<\/p>\n

Refero also offers an MCP server that connects your agent directly to its reference library, so the agent can pull real product interface patterns on demand during development.<\/p>\n

8. TypeUI Design Skills<\/a><\/h2>\n
\"TypeUI<\/figure>\n

TypeUI Design Skills<\/strong> is a collection of design skills made for Claude Design, Google Stitch, Claude Code, Codex, Cursor, and other tools. Each skill is an optimized SKILL.md<\/code> or DESIGN.md<\/code> file that gives your agent a specific design style. Browse the collection, find a look you like, and either copy-paste the file, download it, or use their CLI.<\/p>\n

Install:<\/strong> npx typeui.sh pull [name]<\/code><\/p>\n

Use:<\/strong> Browse the gallery, pick a design, pull it into your project. Your agent builds everything from that point using the chosen aesthetic.<\/p>\n

TypeUI supports OpenClaw<\/a> agents too, so if you\u2019re running agents locally, these skills work out of the box.<\/p>\n

9. UI\/UX Pro Max Skill<\/a><\/h2>\n
\"UI\/UX<\/figure>\n

UI\/UX Pro Max<\/strong> is a design skill with 161 reasoning rules and 67 UI styles. The main feature is the Design System Generator \u2013 you describe your project and it builds a design system with layout patterns, colors, typography, effects, and things to avoid.<\/p>\n

It supports multiple frameworks and stacks including HTML + Tailwind<\/a>, React, and Next.js, and works with VS Code<\/a> agents like Claude Code, Cursor, Windsurf<\/a>, Copilot and Codex.<\/p>\n

Install:<\/strong> npx ui-pro init<\/code> inside any project or npm install -g uipro-cli<\/code> for global access<\/p>\n

Use:<\/strong> Describe your project, for example a premium tour booking app<\/strong><\/q>, and the generator recommends a complete design system with pattern, style, colors, typography, and UX rules. The skill also includes a search script for finding design references by query and domain.<\/p>\n

This is the heaviest option on the list, but also the most complete. If you want one skill that handles the full design system workflow from requirements analysis to component output, this is it.<\/p>\n

10. AI UX Playground<\/a><\/h2>\n
\"AI<\/figure>\n

AI UX Playground<\/strong> is a library of AI-specific UX design patterns for products like ChatGPT<\/a>, Claude, Perplexity<\/a>, and Cursor. Each pattern is documented with examples, use cases, and platform-specific instructions for how to apply it in ChatGPT, Claude, Google Gemini<\/a>, Cursor, or other tools.<\/p>\n

Use:<\/strong> Browse the pattern library, find the UX pattern you need, and follow the platform-specific instructions to apply it. Each pattern includes examples from real AI products and tips for implementing it in your own tooling.<\/p>\n

This one is less about visual polish and more about UX patterns specific to AI products.<\/p>\n

What\u2019s next?<\/h2>\n

We\u2019ve just scratched the surface of what AI skills can do for designers. The tools here are just a starting point, and AI skills for design are still early \u2013 expect rough edges.<\/p>\n

But the direction is clear. Design knowledge is shifting from static documents that humans read to executable rules that agents run<\/strong>. Designers who learn to write those rules will shape what agents build. This article gives you a starting point. Pick one skill from the list, install it, and see what your agent produces differently.<\/p>","protected":false},"excerpt":{"rendered":"

AI coding agents write functional code but lack design taste. These 10 installable AI skills teach your agent color theory, typography, and UI principles.<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[3392],"tags":[3545],"topic":[],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\n10 AI Skills to Give Your Coding Agent Real Design Taste - Hongkiat<\/title>\n<meta name=\"description\" content=\"AI coding agents write functional code but lack design taste. These 10 installable AI skills teach your agent color theory, typography, and UI principles.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/ai-skills-coding-agent-design\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"10 AI Skills to Give Your Coding Agent Real Design Taste\" \/>\n<meta property=\"og:description\" content=\"AI coding agents write functional code but lack design taste. These 10 installable AI skills teach your agent color theory, typography, and UI principles.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/ai-skills-coding-agent-design\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2026-07-03T13:00:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/ai-skills-coding-agent-design\/oklch-color-skill.png\" \/>\n<meta name=\"author\" content=\"Thoriq Firdaus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tfirdaus\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thoriq Firdaus\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/ai-skills-coding-agent-design\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/ai-skills-coding-agent-design\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"10 AI Skills to Give Your Coding Agent Real Design Taste\",\"datePublished\":\"2026-07-03T13:00:41+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/ai-skills-coding-agent-design\\\/\"},\"wordCount\":1495,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/ai-skills-coding-agent-design\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/ai-skills-coding-agent-design\\\/oklch-color-skill.png\",\"keywords\":[\"Artificial Intelligence\"],\"articleSection\":[\"Coding\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/ai-skills-coding-agent-design\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/ai-skills-coding-agent-design\\\/\",\"name\":\"10 AI Skills to Give Your Coding Agent Real Design Taste - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/ai-skills-coding-agent-design\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/ai-skills-coding-agent-design\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/ai-skills-coding-agent-design\\\/oklch-color-skill.png\",\"datePublished\":\"2026-07-03T13:00:41+00:00\",\"description\":\"AI coding agents write functional code but lack design taste. These 10 installable AI skills teach your agent color theory, typography, and UI principles.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/ai-skills-coding-agent-design\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/ai-skills-coding-agent-design\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/ai-skills-coding-agent-design\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/ai-skills-coding-agent-design\\\/oklch-color-skill.png\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/ai-skills-coding-agent-design\\\/oklch-color-skill.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/ai-skills-coding-agent-design\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"10 AI Skills to Give Your Coding Agent Real Design Taste\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\",\"name\":\"Thoriq Firdaus\",\"description\":\"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.\",\"sameAs\":[\"https:\\\/\\\/thoriq.com\",\"https:\\\/\\\/x.com\\\/tfirdaus\"],\"jobTitle\":\"Web Developer\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/thoriq\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"10 AI Skills to Give Your Coding Agent Real Design Taste - Hongkiat","description":"AI coding agents write functional code but lack design taste. These 10 installable AI skills teach your agent color theory, typography, and UI principles.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/ai-skills-coding-agent-design\/","og_locale":"en_US","og_type":"article","og_title":"10 AI Skills to Give Your Coding Agent Real Design Taste","og_description":"AI coding agents write functional code but lack design taste. These 10 installable AI skills teach your agent color theory, typography, and UI principles.","og_url":"https:\/\/www.hongkiat.com\/blog\/ai-skills-coding-agent-design\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2026-07-03T13:00:41+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/ai-skills-coding-agent-design\/oklch-color-skill.png","type":"","width":"","height":""}],"author":"Thoriq Firdaus","twitter_card":"summary_large_image","twitter_creator":"@tfirdaus","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thoriq Firdaus"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/ai-skills-coding-agent-design\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/ai-skills-coding-agent-design\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"10 AI Skills to Give Your Coding Agent Real Design Taste","datePublished":"2026-07-03T13:00:41+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/ai-skills-coding-agent-design\/"},"wordCount":1495,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/ai-skills-coding-agent-design\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/ai-skills-coding-agent-design\/oklch-color-skill.png","keywords":["Artificial Intelligence"],"articleSection":["Coding"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/ai-skills-coding-agent-design\/","url":"https:\/\/www.hongkiat.com\/blog\/ai-skills-coding-agent-design\/","name":"10 AI Skills to Give Your Coding Agent Real Design Taste - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/ai-skills-coding-agent-design\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/ai-skills-coding-agent-design\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/ai-skills-coding-agent-design\/oklch-color-skill.png","datePublished":"2026-07-03T13:00:41+00:00","description":"AI coding agents write functional code but lack design taste. These 10 installable AI skills teach your agent color theory, typography, and UI principles.","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/ai-skills-coding-agent-design\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/ai-skills-coding-agent-design\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/ai-skills-coding-agent-design\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/ai-skills-coding-agent-design\/oklch-color-skill.png","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/ai-skills-coding-agent-design\/oklch-color-skill.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/ai-skills-coding-agent-design\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"10 AI Skills to Give Your Coding Agent Real Design Taste"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807","name":"Thoriq Firdaus","description":"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.","sameAs":["https:\/\/thoriq.com","https:\/\/x.com\/tfirdaus"],"jobTitle":"Web Developer","url":"https:\/\/www.hongkiat.com\/blog\/author\/thoriq\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-jmu","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/74430","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/113"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=74430"}],"version-history":[{"count":1,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/74430\/revisions"}],"predecessor-version":[{"id":74431,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/74430\/revisions\/74431"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=74430"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=74430"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=74430"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=74430"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}