{"id":620,"date":"2026-01-18T10:51:22","date_gmt":"2026-01-18T10:51:22","guid":{"rendered":"https:\/\/blog.adlington.fr\/?p=620"},"modified":"2026-01-18T10:51:22","modified_gmt":"2026-01-18T10:51:22","slug":"claude-code-and-graphic-design","status":"publish","type":"post","link":"https:\/\/blog.adlington.fr\/index.php\/2026\/01\/18\/claude-code-and-graphic-design\/","title":{"rendered":"Claude Code and Graphic Design"},"content":{"rendered":"\n<p>I asked Claude to tell me what it was good and bad at:<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What I&#8217;m Bad At (Don&#8217;t Ask Me)<\/h2>\n\n\n\n<p><strong>1. Graphic Design \/ Visual Aesthetics<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Creating attractive logos, illustrations, or decorative SVGs<\/li>\n\n\n\n<li>Color schemes that look genuinely good (I can do &#8220;technically correct&#8221; but not &#8220;visually appealing&#8221;)<\/li>\n\n\n\n<li>Typography that has real character or style<\/li>\n\n\n\n<li>Texture effects like wood grain, fabric, metal, etc.<\/li>\n\n\n\n<li>Any kind of artistic illustration or icon design<\/li>\n<\/ul>\n\n\n\n<p>My SVG logo attempt was a perfect example &#8211; technically valid SVG, but visually uninspiring and generic. The &#8220;wood grain&#8221; is just a gradient that looks nothing like actual wood.<\/p>\n\n\n\n<p><strong>2. What I Try But Fail At<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Shadows, gradients, and depth effects (I can add them, but they often look flat or artificial)<\/li>\n\n\n\n<li>Visual balance and composition<\/li>\n\n\n\n<li>Making things look &#8220;vintage,&#8221; &#8220;modern,&#8221; &#8220;elegant,&#8221; etc. (I know the words, not the execution)<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">What I&#8217;m Good At (Use Me For This)<\/h2>\n\n\n\n<p><strong>1. Implementation &amp; Layout<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Converting designs into working HTML\/CSS\/JavaScript<\/li>\n\n\n\n<li>Responsive layouts that work across devices<\/li>\n\n\n\n<li>Functional UI components (buttons, forms, grids)<\/li>\n\n\n\n<li>CSS positioning, flexbox, grid layouts<\/li>\n\n\n\n<li>Accessibility and semantic HTML<\/li>\n\n\n\n<li>Making existing designs work correctly<\/li>\n<\/ul>\n\n\n\n<p><strong>2. Technical Design Decisions<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Component architecture<\/li>\n\n\n\n<li>State management<\/li>\n\n\n\n<li>Performance optimization<\/li>\n\n\n\n<li>Code organization<\/li>\n\n\n\n<li>API design<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Better Resources for Design Work<\/h2>\n\n\n\n<p><strong>For Logos:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>DALL-E \/ Midjourney \/ Stable Diffusion<\/strong>: Text-to-image AI for custom graphics<\/li>\n\n\n\n<li><strong>Canva<\/strong>: Templates for logos, good free tier<\/li>\n\n\n\n<li><strong>LogoMaker \/ Looka<\/strong>: AI logo generators<\/li>\n\n\n\n<li><strong>Noun Project<\/strong>: Free\/paid icon library for simple logos<\/li>\n<\/ul>\n\n\n\n<p><strong>For Textures &amp; Effects:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>CSS Pattern Generators<\/strong>:\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.magicpattern.design\/tools\/css-backgrounds\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/www.magicpattern.design\/tools\/css-backgrounds<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/heropatterns.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/heropatterns.com\/<\/a><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong><a href=\"https:\/\/SVGBackgrounds.com\">SVGBackgrounds.com<\/a><\/strong>: Pre-made SVG patterns<\/li>\n\n\n\n<li><strong><a href=\"https:\/\/unsplash.com\/\">Unsplash<\/a>\/<a href=\"https:\/\/www.pexels.com\/\">Pexels<\/a><\/strong>: Free stock photos for texture overlays<\/li>\n<\/ul>\n\n\n\n<p><strong>For Color Schemes:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Coolors.co<\/strong>: Generate harmonious color palettes<\/li>\n\n\n\n<li><strong>Adobe Color<\/strong>: Color wheel with harmony rules<\/li>\n\n\n\n<li><strong>Realtime Colors<\/strong>: Preview color schemes on real UI<\/li>\n<\/ul>\n\n\n\n<p><strong>For Complete UI Design:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Figma<\/strong>: Free for small projects, excellent for designing before coding<\/li>\n\n\n\n<li><strong><a href=\"https:\/\/tailwindcss.com\/\">Tailwind<\/a> UI<\/strong>: Pre-built component designs<\/li>\n\n\n\n<li><strong><a href=\"https:\/\/ui.shadcn.com\/docs\">shadcn\/ui<\/a><\/strong>: Modern component library with good aesthetics<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">My Recommended Workflow With You<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>You generate\/find the visual assets<\/strong>\u00a0(logos, textures, images)<\/li>\n\n\n\n<li><strong>I implement them<\/strong>\u00a0into working code with proper layout and functionality<\/li>\n\n\n\n<li><strong>You provide feedback<\/strong>\u00a0on positioning, sizing, spacing<\/li>\n\n\n\n<li><strong>I iterate<\/strong>\u00a0on the technical implementation<\/li>\n<\/ol>\n\n\n\n<p>This is exactly what we just did with the cribbage logo &#8211; you generated the image, I integrated it into the board. That&#8217;s the sweet spot.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Bottom Line<\/h2>\n\n\n\n<p><strong>Don&#8217;t ask me to:<\/strong>&nbsp;Make things look beautiful from scratch<\/p>\n\n\n\n<p><strong>Do ask me to:<\/strong>&nbsp;Make beautiful things work correctly, lay out properly, and integrate seamlessly into your application<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I asked Claude to tell me what it was good and bad at: What I&#8217;m Bad At (Don&#8217;t Ask Me) 1. Graphic Design \/ Visual Aesthetics My SVG logo attempt was a perfect example &#8211; technically valid SVG, but visually uninspiring and generic. The &#8220;wood grain&#8221; is just a gradient that looks nothing like actual [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[5,72,60,55],"class_list":["post-620","post","type-post","status-publish","format-standard","hentry","category-blog","tag-ai","tag-claude","tag-coding","tag-graphic-design"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/blog.adlington.fr\/index.php\/wp-json\/wp\/v2\/posts\/620","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.adlington.fr\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.adlington.fr\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.adlington.fr\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.adlington.fr\/index.php\/wp-json\/wp\/v2\/comments?post=620"}],"version-history":[{"count":1,"href":"https:\/\/blog.adlington.fr\/index.php\/wp-json\/wp\/v2\/posts\/620\/revisions"}],"predecessor-version":[{"id":621,"href":"https:\/\/blog.adlington.fr\/index.php\/wp-json\/wp\/v2\/posts\/620\/revisions\/621"}],"wp:attachment":[{"href":"https:\/\/blog.adlington.fr\/index.php\/wp-json\/wp\/v2\/media?parent=620"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.adlington.fr\/index.php\/wp-json\/wp\/v2\/categories?post=620"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.adlington.fr\/index.php\/wp-json\/wp\/v2\/tags?post=620"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}