<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Hazeq Bin Mohsin</title>
    <description>The latest articles on DEV Community by Hazeq Bin Mohsin (@hazeqbinmohsin).</description>
    <link>https://dev.to/hazeqbinmohsin</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3999119%2F93704b33-c6ff-4bc2-9505-8fc78de7985f.png</url>
      <title>DEV Community: Hazeq Bin Mohsin</title>
      <link>https://dev.to/hazeqbinmohsin</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/hazeqbinmohsin"/>
    <language>en</language>
    <item>
      <title>The Advantage of Being a Multidisciplinary Builder</title>
      <dc:creator>Hazeq Bin Mohsin</dc:creator>
      <pubDate>Sat, 31 Oct 2026 12:02:46 +0000</pubDate>
      <link>https://dev.to/hazeqbinmohsin/the-advantage-of-being-a-multidisciplinary-builder-4gl0</link>
      <guid>https://dev.to/hazeqbinmohsin/the-advantage-of-being-a-multidisciplinary-builder-4gl0</guid>
      <description>&lt;p&gt;I've always found it difficult to stick to just one creative field.&lt;/p&gt;

&lt;p&gt;I enjoy programming, but I also enjoy graphic design, UI/UX, animation, and 3D modelling. Sometimes I'm building an application; other times, I'm designing a brand identity or experimenting with a completely different idea.&lt;/p&gt;

&lt;p&gt;For a while, I thought of these as separate interests.&lt;/p&gt;

&lt;p&gt;Eventually, I started realizing how much they complement each other.&lt;/p&gt;

&lt;h2&gt;
  
  
  Design changes how I approach development
&lt;/h2&gt;

&lt;p&gt;When I work on an application, I'm not just thinking about whether the code works.&lt;/p&gt;

&lt;p&gt;I'm also thinking about how someone will interact with it.&lt;/p&gt;

&lt;p&gt;Where should a button go? Is the interface communicating the right information? Does the experience feel intuitive?&lt;/p&gt;

&lt;p&gt;My design background influences those decisions before I even start writing the code.&lt;/p&gt;

&lt;p&gt;And development gives me the ability to turn those designs into functioning products rather than leaving them as static concepts.&lt;/p&gt;

&lt;h2&gt;
  
  
  Different skills create different perspectives
&lt;/h2&gt;

&lt;p&gt;Animation teaches timing, movement, and visual communication.&lt;/p&gt;

&lt;p&gt;3D modelling teaches spatial thinking and attention to detail.&lt;/p&gt;

&lt;p&gt;Programming teaches logic, structure, and problem-solving.&lt;/p&gt;

&lt;p&gt;Design teaches hierarchy, consistency, and how people interpret what they see.&lt;/p&gt;

&lt;p&gt;These disciplines might seem unrelated at first, but I've found that learning one often changes how I approach another.&lt;/p&gt;

&lt;p&gt;Sometimes the solution to a development problem comes from thinking like a designer. Sometimes a design decision becomes much easier after understanding the technical limitations behind it.&lt;/p&gt;

&lt;h2&gt;
  
  
  But there's a catch: focus
&lt;/h2&gt;

&lt;p&gt;Having multiple interests doesn't mean trying to work on everything simultaneously.&lt;/p&gt;

&lt;p&gt;Context switching can become exhausting, and starting new projects is considerably easier than finishing existing ones.&lt;/p&gt;

&lt;p&gt;I've learned that curiosity is valuable, but priorities matter.&lt;/p&gt;

&lt;p&gt;Not every idea needs to become a product. Not every experiment needs to become a business. Some things are worth building simply because they teach you something.&lt;/p&gt;

&lt;p&gt;The important part is knowing when to explore and when to commit.&lt;/p&gt;

&lt;h2&gt;
  
  
  I don't want to limit myself to one title
&lt;/h2&gt;

&lt;p&gt;I enjoy being a developer, but I don't think that's the only way to describe what I do.&lt;/p&gt;

&lt;p&gt;I want to build software, create visual experiences, experiment with new technologies, and develop products that people genuinely find useful.&lt;/p&gt;

&lt;p&gt;I don't necessarily see these as competing interests. I see them as different tools for solving different problems.&lt;/p&gt;

&lt;p&gt;And perhaps that's one of the biggest advantages of being multidisciplinary: you don't always have to approach a problem from the same direction.&lt;/p&gt;

&lt;p&gt;**I'm curious: Do you prefer specializing in one field, or exploring multiple disciplines and combining them? And has learning one skill ever unexpectedly improved another?&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>design</category>
      <category>beginners</category>
      <category>productivity</category>
    </item>
    <item>
      <title>A Feature Can Work Perfectly and Still Be a Bad User Experience</title>
      <dc:creator>Hazeq Bin Mohsin</dc:creator>
      <pubDate>Thu, 29 Oct 2026 17:29:21 +0000</pubDate>
      <link>https://dev.to/hazeqbinmohsin/a-feature-can-work-perfectly-and-still-be-a-bad-user-experience-1h7e</link>
      <guid>https://dev.to/hazeqbinmohsin/a-feature-can-work-perfectly-and-still-be-a-bad-user-experience-1h7e</guid>
      <description>&lt;h1&gt;
  
  
  A Feature Can Work Perfectly and Still Be a Bad User Experience
&lt;/h1&gt;

&lt;p&gt;You can build a feature that works exactly as intended, passes its tests, and has no obvious bugs — and still leave users wondering why they should use it.&lt;/p&gt;

&lt;p&gt;I've always been interested in both sides of creating digital products: how they look and how they work. Working across graphic design, animation, UI/UX, and software development has made me appreciate something that is easy to overlook when building applications.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Making something work and making something work well for people are two different challenges.&lt;/strong&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  1. Functionality is only the beginning
&lt;/h2&gt;

&lt;p&gt;Imagine you're building a task management application.&lt;/p&gt;

&lt;p&gt;You implement task creation, editing, deletion, deadlines, and persistence. Everything works. The data is saved correctly, and the interface responds to user input.&lt;/p&gt;

&lt;p&gt;Technically, you've accomplished what you set out to do.&lt;/p&gt;

&lt;p&gt;But then someone opens the application for the first time.&lt;/p&gt;

&lt;p&gt;They don't know where to begin. There are too many competing buttons. Important actions are buried in menus. The interface technically contains everything they need, but finding it requires more effort than it should.&lt;/p&gt;

&lt;p&gt;The functionality isn't necessarily broken. The experience is.&lt;/p&gt;

&lt;p&gt;This is why I think evaluating software purely by its feature list misses an important part of the picture.&lt;/p&gt;

&lt;p&gt;A feature should do more than exist. It should help someone accomplish something.&lt;/p&gt;

&lt;h2&gt;
  
  
  2. Good design isn't just decoration
&lt;/h2&gt;

&lt;p&gt;When people hear "UI design," they sometimes think about colors, gradients, shadows, animations, and rounded corners.&lt;/p&gt;

&lt;p&gt;Those things can contribute to a polished interface, but they aren't the foundation of good design.&lt;/p&gt;

&lt;p&gt;Good design also involves deciding:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;What deserves the user's attention?&lt;/li&gt;
&lt;li&gt;Which actions should be immediately accessible?&lt;/li&gt;
&lt;li&gt;What information can be removed without losing meaning?&lt;/li&gt;
&lt;li&gt;What should happen when something goes wrong?&lt;/li&gt;
&lt;li&gt;How can the interface communicate what to do next?&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Consider two buttons that perform the same action. One is surrounded by several competing controls, while the other appears exactly where the user expects to need it.&lt;/p&gt;

&lt;p&gt;The underlying functionality is identical. The amount of thought required to use it may not be.&lt;/p&gt;

&lt;p&gt;Visual polish can attract attention, but clarity and consistency help people use a product.&lt;/p&gt;

&lt;h2&gt;
  
  
  3. Developers and designers should think about the same problem
&lt;/h2&gt;

&lt;p&gt;I've found it useful to think about product design and software engineering as connected disciplines rather than separate stages.&lt;/p&gt;

&lt;p&gt;A designer might propose an interaction that feels natural but becomes difficult to implement reliably. A developer might implement a technically elegant solution that introduces unnecessary complexity for the user.&lt;/p&gt;

&lt;p&gt;Neither perspective is sufficient on its own.&lt;/p&gt;

&lt;p&gt;The important question is not simply whether a design looks good or whether an implementation is clever.&lt;/p&gt;

&lt;p&gt;It's whether the solution works well within the technical constraints while helping the user accomplish their goal.&lt;/p&gt;

&lt;p&gt;Sometimes that means simplifying the design. Sometimes it means changing the architecture. And sometimes it means questioning whether the feature needs to exist at all.&lt;/p&gt;

&lt;p&gt;That last question is particularly important.&lt;/p&gt;

&lt;p&gt;Building something because it is technically possible doesn't automatically make it worth building.&lt;/p&gt;

&lt;h2&gt;
  
  
  4. Every additional feature has a cost
&lt;/h2&gt;

&lt;p&gt;When developing software, it's tempting to keep adding capabilities.&lt;/p&gt;

&lt;p&gt;A new setting sounds useful. Another menu option seems reasonable. One more customization feature could make the product appeal to more people.&lt;/p&gt;

&lt;p&gt;Individually, these decisions might make sense. Together, they can make an application unnecessarily complicated.&lt;/p&gt;

&lt;p&gt;Every feature introduces some combination of interface elements, decisions, maintenance requirements, and potential edge cases.&lt;/p&gt;

&lt;p&gt;That doesn't mean applications should be stripped down to the point where they become limited or frustrating.&lt;/p&gt;

&lt;p&gt;It means each addition should have a purpose.&lt;/p&gt;

&lt;p&gt;When deciding whether to introduce a feature, I think it's worth asking three questions:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;What problem does this solve?&lt;/li&gt;
&lt;li&gt;How frequently will someone benefit from it?&lt;/li&gt;
&lt;li&gt;Does the value justify the additional complexity?&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;These questions aren't a perfect formula for product decisions, but they can help separate genuinely useful functionality from features that merely make an application look more capable.&lt;/p&gt;

&lt;h2&gt;
  
  
  5. Start with the experience, then decide what to build
&lt;/h2&gt;

&lt;p&gt;One practical approach is to describe the user's goal before designing the interface or writing the implementation.&lt;/p&gt;

&lt;p&gt;For example, instead of starting with:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;"I need a dashboard with five cards, three menus, and a settings panel."&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Start with:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;"The user needs to understand what requires their attention and decide what to do next."&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;That second description gives you a problem to solve rather than a predetermined collection of interface elements.&lt;/p&gt;

&lt;p&gt;You can then explore different layouts, remove unnecessary steps, and determine which functionality is actually required.&lt;/p&gt;

&lt;p&gt;Only after that does it become easier to evaluate implementation choices.&lt;/p&gt;

&lt;p&gt;This doesn't eliminate iteration. In fact, iteration is essential. The initial design might be wrong, and real usage may reveal problems that weren't obvious during development.&lt;/p&gt;

&lt;p&gt;But starting with the user's goal gives those iterations a clearer direction.&lt;/p&gt;

&lt;h2&gt;
  
  
  6. What I want to keep in mind when building products
&lt;/h2&gt;

&lt;p&gt;As I continue working across software development and design, there are a few principles I want to carry into every project:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Clarity over unnecessary complexity.&lt;/strong&gt; Users shouldn't have to decode an interface before they can use it.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Purpose over feature count.&lt;/strong&gt; More functionality isn't automatically more value.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Consistency over isolated brilliance.&lt;/strong&gt; An interaction should make sense within the rest of the product.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Usability alongside functionality.&lt;/strong&gt; A feature isn't finished simply because its implementation works.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Iteration over assumptions.&lt;/strong&gt; A design that seems obvious to its creator may not be obvious to someone encountering it for the first time.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;None of these principles is particularly revolutionary. The challenge is applying them consistently, especially when deadlines, technical limitations, and ambitious ideas compete for attention.&lt;/p&gt;

&lt;h2&gt;
  
  
  Final thoughts
&lt;/h2&gt;

&lt;p&gt;I think one of the most interesting parts of building software is that the engineering and design problems are often inseparable.&lt;/p&gt;

&lt;p&gt;The code determines what a product can do. The design helps determine how people understand and use those capabilities. Product thinking connects both to a problem worth solving.&lt;/p&gt;

&lt;p&gt;A technically impressive application can still be difficult to use. A beautiful interface can still fail to deliver value. The goal is to bring those pieces together.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;When you build software, what do you prioritize first: functionality, usability, or visual design?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;And have you ever used an application that worked perfectly but somehow still felt frustrating to use? I'd be interested to hear what made the experience that way.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>ui</category>
      <category>ux</category>
      <category>uxdesign</category>
    </item>
    <item>
      <title>What Building Real Software Taught Me About AI Coding Agents</title>
      <dc:creator>Hazeq Bin Mohsin</dc:creator>
      <pubDate>Sat, 24 Oct 2026 13:04:08 +0000</pubDate>
      <link>https://dev.to/hazeqbinmohsin/what-building-real-software-taught-me-about-ai-coding-agents-25kg</link>
      <guid>https://dev.to/hazeqbinmohsin/what-building-real-software-taught-me-about-ai-coding-agents-25kg</guid>
      <description>&lt;p&gt;AI coding agents are getting better at writing code. But after testing several of them on real projects, I've learned that choosing the right tool is only part of the problem.&lt;/p&gt;

&lt;p&gt;The more important question is: &lt;strong&gt;Can the agent actually help you ship working software?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;As an independent developer, I care less about impressive demonstrations and more about what happens when an AI agent has to work with an existing codebase, understand a project's requirements, fix bugs, or implement a feature without breaking something else.&lt;/p&gt;

&lt;p&gt;Here's what my experience has taught me so far.&lt;/p&gt;

&lt;h2&gt;
  
  
  1. The best AI isn't necessarily the best coding agent
&lt;/h2&gt;

&lt;p&gt;It's tempting to evaluate AI tools by how well they answer questions or generate code snippets. But working on an actual application introduces a different set of challenges.&lt;/p&gt;

&lt;p&gt;A coding agent might generate a beautiful component but misunderstand how it fits into the existing application. It might implement a feature that looks correct but fails when connected to a backend. It might even introduce new bugs while attempting to fix old ones.&lt;/p&gt;

&lt;p&gt;I've experimented with several tools, including ChatGPT, Claude, DeepSeek, Kimi, Grok, and Codex.&lt;/p&gt;

&lt;p&gt;My results varied depending on the task.&lt;/p&gt;

&lt;p&gt;Some tools performed better at frontend work, while others were more effective at backend implementation and debugging. The tool that impressed me in one area wasn't necessarily the one I'd choose for another.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The lesson? Evaluate AI tools on the work you actually need them to do, not just on their demos.&lt;/strong&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  2. Context matters more than I initially expected
&lt;/h2&gt;

&lt;p&gt;A coding task rarely exists in isolation.&lt;/p&gt;

&lt;p&gt;When working on an existing application, an agent needs to understand more than the immediate instruction. It needs to account for the project's architecture, existing conventions, dependencies, data structures, and intended user experience.&lt;/p&gt;

&lt;p&gt;Consider a seemingly simple request: add a new feature to a productivity application.&lt;/p&gt;

&lt;p&gt;The implementation might involve:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Updating the interface.&lt;/li&gt;
&lt;li&gt;Connecting the feature to existing application state.&lt;/li&gt;
&lt;li&gt;Persisting data correctly.&lt;/li&gt;
&lt;li&gt;Handling errors and edge cases.&lt;/li&gt;
&lt;li&gt;Making sure existing features continue to work.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;An agent that only understands the visible interface may produce something convincing without delivering a complete implementation.&lt;/p&gt;

&lt;p&gt;I've found it useful to be explicit about requirements, constraints, and expected behavior rather than relying on a vague description of the desired result.&lt;/p&gt;

&lt;p&gt;The more consequential the change, the more important it becomes to understand the surrounding code.&lt;/p&gt;

&lt;h2&gt;
  
  
  3. Different tools deserve different jobs
&lt;/h2&gt;

&lt;p&gt;One of my most useful observations has been that I don't need to choose a single AI tool for everything.&lt;/p&gt;

&lt;p&gt;I can use one tool to explore an architectural decision, another to help implement a feature, and another to investigate a stubborn bug.&lt;/p&gt;

&lt;p&gt;For example, when developing an application, my workflow might involve:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Planning:&lt;/strong&gt; Define the expected behavior, constraints, and acceptance criteria.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Implementation:&lt;/strong&gt; Use an appropriate coding agent to make a focused change.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Review:&lt;/strong&gt; Inspect the generated code and check whether it follows the project's architecture.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Testing:&lt;/strong&gt; Run the application, exercise the feature, and check for regressions.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Refinement:&lt;/strong&gt; Address any problems before moving on.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;This approach is more deliberate than handing an agent a broad instruction and assuming the job is finished when it returns code.&lt;/p&gt;

&lt;p&gt;It also makes failures easier to diagnose. If something goes wrong, I can investigate a specific change rather than untangling a large collection of unrelated modifications.&lt;/p&gt;

&lt;h2&gt;
  
  
  4. AI-generated code still needs an engineer behind it
&lt;/h2&gt;

&lt;p&gt;AI can accelerate implementation, but generating code and delivering reliable software are not the same thing.&lt;/p&gt;

&lt;p&gt;A feature can compile and still behave incorrectly. A database operation can work in a basic demonstration but fail under unexpected conditions. An interface can look polished while being confusing to use.&lt;/p&gt;

&lt;p&gt;That's why I believe developers should understand the code they're shipping, even when an AI agent wrote much of it.&lt;/p&gt;

&lt;p&gt;I want to be able to explain why a solution works, identify its limitations, and modify it when requirements change.&lt;/p&gt;

&lt;p&gt;This doesn't mean manually writing every line. It means retaining enough understanding and control to take responsibility for the final result.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;AI should increase a developer's capabilities, not eliminate the need for engineering judgment.&lt;/strong&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  5. The biggest productivity trap is accepting code too quickly
&lt;/h2&gt;

&lt;p&gt;It's easy to confuse the amount of code generated with the amount of progress made.&lt;/p&gt;

&lt;p&gt;An agent might produce hundreds of lines in seconds. But if the implementation is incorrect, those lines become additional work to understand, debug, and replace.&lt;/p&gt;

&lt;p&gt;I've learned to value focused changes over unnecessarily large implementations.&lt;/p&gt;

&lt;p&gt;A practical approach is to break substantial tasks into smaller steps, define what success looks like, and verify each important change before building on top of it.&lt;/p&gt;

&lt;p&gt;For a frontend feature, that might mean checking the component's behavior and integration. For a backend feature, it might mean verifying data validation, error handling, and persistence.&lt;/p&gt;

&lt;p&gt;The appropriate checks depend on the application, but the principle remains the same: &lt;strong&gt;generated code is a proposed solution, not proof that the task is complete.&lt;/strong&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  6. My approach going forward
&lt;/h2&gt;

&lt;p&gt;I'm continuing to experiment with AI-assisted development as I build and improve my own software products.&lt;/p&gt;

&lt;p&gt;Rather than chasing every new tool, I want to develop a workflow that combines the strengths of AI with the parts of engineering that still require careful reasoning, testing, and product judgment.&lt;/p&gt;

&lt;p&gt;My current priorities are straightforward:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Choose tools based on demonstrated performance on relevant tasks.&lt;/li&gt;
&lt;li&gt;Give agents clear requirements and enough project context.&lt;/li&gt;
&lt;li&gt;Keep changes focused and reviewable.&lt;/li&gt;
&lt;li&gt;Test actual behavior instead of trusting a successful code-generation response.&lt;/li&gt;
&lt;li&gt;Treat failures as useful feedback about both the tool and my workflow.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;I don't think there's one universally best coding agent. The best choice depends on the project, the task, the available context, and how effectively the developer can evaluate the result.&lt;/p&gt;

&lt;p&gt;And as these tools continue to evolve, I expect that conclusion to evolve with them.&lt;/p&gt;

&lt;h2&gt;
  
  
  Final thoughts
&lt;/h2&gt;

&lt;p&gt;AI coding agents have changed how I approach software development. They can help me explore ideas, accelerate implementation, and solve problems that would otherwise take longer.&lt;/p&gt;

&lt;p&gt;But the goal isn't to generate the most code in the least amount of time.&lt;/p&gt;

&lt;p&gt;The goal is to build better software.&lt;/p&gt;

&lt;p&gt;I'm interested in learning how other developers are approaching this shift, especially those working on real applications rather than isolated coding exercises.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;What's your experience with AI coding agents?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Have you found a tool that consistently performs well for your particular workflow, or have you also discovered that different tools excel at different tasks?&lt;/p&gt;

&lt;p&gt;I'd be interested to hear what has worked for you, what hasn't, and how you verify that AI-generated code is actually ready to ship.&lt;/p&gt;

</description>
      <category>ai</category>
      <category>programming</category>
      <category>webdev</category>
      <category>productivity</category>
    </item>
    <item>
      <title>I Couldn't Find a VS Code Theme That Felt Right — So I Built One Myself..</title>
      <dc:creator>Hazeq Bin Mohsin</dc:creator>
      <pubDate>Tue, 23 Jun 2026 17:17:06 +0000</pubDate>
      <link>https://dev.to/hazeqbinmohsin/i-couldnt-find-a-vs-code-theme-that-felt-right-so-i-built-one-myself-2m6n</link>
      <guid>https://dev.to/hazeqbinmohsin/i-couldnt-find-a-vs-code-theme-that-felt-right-so-i-built-one-myself-2m6n</guid>
      <description>&lt;p&gt;Most themes force a choice: vibrant and tiring, beautiful and unfunctional, or readable and dull.&lt;/p&gt;

&lt;p&gt;The default icon theme was boring, the icons were not recognizable much at small scale. The color theme missed good syntax highlighting and blender background colors.&lt;/p&gt;

&lt;p&gt;I went through Ayu, One Dark Pro, Monokai Pro, and dozens of others. Every one of them fell short. The icons had gaps. The syntax highlighting wasn't deep enough. The colors either burned my eyes or made everything look blender and lifeless. After ten hours of coding, I'd just feel exhausted.&lt;/p&gt;

&lt;p&gt;So I stopped looking. I opened Adobe Illustrator and started building.&lt;/p&gt;

&lt;p&gt;The first version was called &lt;strong&gt;Syntax Shine&lt;/strong&gt; — it was just a personal syntax theme. I tweaked every token color until I could stare at a complex React component at 2 a.m. and still read it clearly. The improvement was immediate. That's when it clicked: &lt;em&gt;if this helped me this much, it could help others too.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;I expanded it into a full icon theme, published it as &lt;strong&gt;VS Seti Plus&lt;/strong&gt;, and it somehow got 300+ installs and two 5-star reviews. But the name confused people, especially AI — most assumed it was based on the built‑in Seti icons. It wasn't. Every icon was designed from scratch.&lt;/p&gt;

&lt;p&gt;So I rebuilt the brand from the ground up. It's now called &lt;strong&gt;Spect&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fusf5ud98y29weei1ay92.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fusf5ud98y29weei1ay92.png" alt="Editor Mockup | Spect (Dark Classic)" width="800" height="458"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;h1&gt;
  
  
  What Spect Actually Is
&lt;/h1&gt;

&lt;p&gt;Spect is a &lt;strong&gt;complete visual system for VS Code&lt;/strong&gt; — 250+ original icons and 7 color themes, all free.&lt;/p&gt;

&lt;h2&gt;
  
  
  Pixel-Perfect Icons
&lt;/h2&gt;

&lt;p&gt;Every icon is &lt;strong&gt;hand-crafted&lt;/strong&gt; in Adobe Illustrator and uses exactly one color from an 8‑color functional palette (Red, Orange, Yellow, Green, Blue, Purple, Gray, White). These are clean, scannable shapes that stay recognizable even when your sidebar is collapsed to 4 pixels wide.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F7zaratho7rvk72sml6hg.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F7zaratho7rvk72sml6hg.png" alt="Sample Icons" width="798" height="172"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Most icon packs assign the same symbol to similar file types. Spect doesn't. JS, MJS, CJS, and OJS each get their own icon. JSX and TSX are visually distinct. HTML, HTM, and XML are clearly separated. Python scripts and modules are different. Those small distinctions matter when you're navigating a massive codebase at speed.&lt;/p&gt;

&lt;h2&gt;
  
  
  Color Themes That Work
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fraw.githubusercontent.com%2FHazeqBinMohsin%2Fspect-ui%2Fmain%2Feditor-preview.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fraw.githubusercontent.com%2FHazeqBinMohsin%2Fspect-ui%2Fmain%2Feditor-preview.png" alt="Color theme variants" width="799" height="462"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Spect has seven theme variants, not just one dark theme:&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Theme&lt;/th&gt;
&lt;th&gt;Best for&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Dark Classic&lt;/td&gt;
&lt;td&gt;All‑purpose. Warm copper strings, soft gold functions, deep blacks.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Dark Professional&lt;/td&gt;
&lt;td&gt;My own choice — deeper backgrounds, brighter foregrounds.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Dark Contrast&lt;/td&gt;
&lt;td&gt;Daylight work. Elevated contrast and bright borders.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Dark Colorblind&lt;/td&gt;
&lt;td&gt;Maximum luminance contrast. Fiery bright text on the darkest backgrounds.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Light Classic Clean whitespace, bright token colors.&lt;/td&gt;
&lt;td&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Light Professional&lt;/td&gt;
&lt;td&gt;High accessibility with deep token colors for long work.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Light Colorblind&lt;/td&gt;
&lt;td&gt;Maximum readability on a bright white background.&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;Every theme has &lt;strong&gt;40+ syntax token rules&lt;/strong&gt; — strings, regex, keywords, functions, variables, types, numbers, HTML/XML, CSS, Markdown, JSON, diffs, and more. Nothing gets left unstyled.&lt;/p&gt;

&lt;p&gt;The command palette, autocomplete suggestions, and hovers float with subtle translucency. You can even see the code behind them. It's one of the specialties of Spect — And it just feels more premium and beautiful.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fraw.githubusercontent.com%2FHazeqBinMohsin%2Fspect-ui%2Fmain%2Fwidgets-preview.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fraw.githubusercontent.com%2FHazeqBinMohsin%2Fspect-ui%2Fmain%2Fwidgets-preview.png" alt="Translucent Widgets" width="800" height="337"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;p&gt;I never intended to build a product. I just wanted my own workspace to feel comfortable.&lt;/p&gt;

&lt;p&gt;But when I published it as VS Seti Plus, something happened: developers started loving it, and it got 2 reviews, each featuring a 5-star gift, in under 50 downloads.&lt;/p&gt;

&lt;p&gt;That feedback keeps me going. Every icon, every token color, every contrast ratio is there because I personally needed it during a long coding session.&lt;/p&gt;




&lt;h2&gt;
  
  
  How to Try It
&lt;/h2&gt;

&lt;p&gt;Just search for &lt;strong&gt;"Spect"&lt;/strong&gt; in the VS Code Extensions panel. That's it. Install the first result you find there.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://marketplace.visualstudio.com/items?itemName=HazeqBinMohsin.spect-ui" rel="noopener noreferrer"&gt;Link to the marketplace&lt;/a&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  What's Next
&lt;/h2&gt;

&lt;p&gt;I'm actively maintaining Spect. The last update added &lt;strong&gt;40+ new icons&lt;/strong&gt; (CoffeeScript, F#, Zig, Nix, Elixir, Haskell, and more) and two new light themes. There's a colorblind‑specific variant for both dark and light modes, because accessibility shouldn't be an afterthought.&lt;/p&gt;

&lt;p&gt;If you try Spect and something feels off — a missing icon, a color that doesn't work for you, a language that isn't covered — &lt;a href="https://github.com/HazeqBinMohsin/spect-ui/issues/new" rel="noopener noreferrer"&gt;open an issue&lt;/a&gt;. I actually read them and fix things fast.&lt;/p&gt;




&lt;p&gt;Also, keep in mind that this is not an advertisement, but a personal project I made for myself.&lt;br&gt;
&lt;strong&gt;Happy coding.&lt;/strong&gt;&lt;/p&gt;

</description>
      <category>vscode</category>
      <category>design</category>
      <category>beginners</category>
      <category>productivity</category>
    </item>
  </channel>
</rss>
