With AI-assisted workflows, developers need to evolve and learn how to better structure projects when integrating design systems into development. Instead of seeing development as just coding line by line, we need to shift our mindset toward co-creation—focusing on problem-solving, decision-making, and continuously improving how we code to amplify our skills.

Shawn, who recently joined Greydient Lab as a web developer, shares his experience using MCP to bridge design tools and AI-powered editors, allowing design data from Figma to flow directly into the development environment to optimise workflow.

AI Can Build Structure, But Not Perfect Design

From my perspective, instead of recreating everything from scratch, MCP generates a structured starting point, which supports review, refinement, and improvement. It shifted my perspective from just writing code to understanding, validating, and taking ownership of the output.

There were struggles as I trusted the output too quickly. Sometimes the generated design layout looked correct but had inconsistencies in responsive view, logic or code structure. AI speeds up execution, but it also demands a deeper understanding of the project objectives. The faster the output, the more critical your thinking must be to constantly calibrate. If you don’t understand the fundamentals, you can’t properly evaluate what it produces. In fact, one of the first lessons I learned was the difference between structure and accuracy. 

Having a good structure does not necessarily translate to design accuracy. The exact spacing, visual hierarchy, and subtle design decisions still required manual refinement. AI could scaffold a framework but translating the Figma design into a polished, pixel perfect result was still my responsibility.

AI through MCP could generate the skeleton of layout  sections, components, and HTML scaffolding appeared almost instantly.

Fast Development Through Thoughtful Prompting

At first, I used AI too broadly, giving it entire frames and expecting perfect results. The outputs were functional with unnecessary wrappers, misaligned components, and inconsistent block structure. Therefore, I learned to prompt intentionally with the following parameters:

• Specify expected block structure

• Clarify folder hierarchy

• Define naming conventions and constraints

With the problem broken down into smaller sections, it made the AI-generated output more useful and enabled me to think clearly about the architecture. Shorter, structured prompts led to cleaner results and deeper understanding of the context and intent.

Treat AI Output as a Draft, Not a Solution

AI provided a head start, but the responsibility of refining and perfecting the code remained mine. Even with precise prompts, AI outputs were rarely perfect.

Key highlights for refining AI output:

1. Reviewing each line of code to ensure the AI-generated code is standard code

2. Comparing it to project standards to maintain team conventions 

3. Refactoring or rewriting confusing logic to improve maintainability and readability

4. Testing of edge cases to ensure robustness for unusual or unexpected inputs 

5. Testing responsive breakpoints to guarantee the design works across different devices 

Conclusion

Using AI and MCP servers allows me to be more efficient at work, but real growth as a developer still comes from discipline, understanding, and ownership. Speed is a tool, but intention, critical thinking, and accountability are what make us true professionals. AI can build structure, but ensuring the final product is precise, polished, and meaningful remains our responsibility. Technology can accelerate progress, but it is our expertise, judgment, and dedication that transform that speed into real impact.