[{"data":1,"prerenderedAt":138},["ShallowReactive",2],{"navigation":3,"search":47,"\u002Fblog\u002Fhow-i-built-my-own-design-system-from-scratch":64,"\u002Fblog\u002Fhow-i-built-my-own-design-system-from-scratch-surround":127},[4,30],{"title":5,"path":6,"stem":7,"children":8,"page":29},"Certificates","\u002Fcertificates","certificates",[9,13,17,21,25],{"title":10,"path":11,"stem":12},"Bachelor of Computer Science","\u002Fcertificates\u002Fbachelors_degree","certificates\u002FBachelors_Degree",{"title":14,"path":15,"stem":16},"Certificate of Achievement","\u002Fcertificates\u002Fbos","certificates\u002FBoS",{"title":18,"path":19,"stem":20},"Claude 101","\u002Fcertificates\u002Fclaude_101","certificates\u002FClaude_101",{"title":22,"path":23,"stem":24},"Web Development BootCamp","\u002Fcertificates\u002Fudemy","certificates\u002FUDEMY",{"title":26,"path":27,"stem":28},"Analyze Speech and Language with Google APIs","\u002Fcertificates\u002Fgoogle-cloud-analyze-speech","certificates\u002Fgoogle-cloud-analyze-speech",false,{"title":31,"path":32,"stem":33,"children":34,"page":29},"Projects","\u002Fprojects","projects",[35,39,43],{"title":36,"path":37,"stem":38},"CodeLao - Digital Innovation Agency","\u002Fprojects\u002Fcodelao","projects\u002Fcodelao",{"title":40,"path":41,"stem":42},"Luxury Resort & Cabin Booking System","\u002Fprojects\u002Fhotel-demo","projects\u002Fhotel-demo",{"title":44,"path":45,"stem":46},"Oneqik - Comprehensive HR Solution","\u002Fprojects\u002Foneqik-hr","projects\u002Foneqik-hr",[48,52,55,58,61],{"id":11,"title":10,"titles":49,"content":50,"level":51},[],"Bachelor's Degree in Computer Science, focusing on software engineering and systems design. Successfully completed a four-year Bachelor's degree program in Computer Science. The curriculum covered advanced topics including: Data Structures and AlgorithmsDatabase Management SystemsSoftware Engineering PrinciplesOperating SystemsArtificial Intelligence",1,{"id":15,"title":14,"titles":53,"content":54,"level":51},[],"Board of Investment (BoI) certification. This is my certificate from the Board of Investment (BoI).",{"id":19,"title":18,"titles":56,"content":57,"level":51},[],"Introduction to Claude AI, covering core features, project management, and effective prompting. Successfully completed the Claude 101 course by Anthropic Academy. This course provides a comprehensive introduction to leveraging Claude for daily productivity and advanced workflows. Verify Certificate Key learning outcomes included: Core Features & Navigation: Mastered the fundamental interface and capabilities of Claude.Projects & Artifacts: Learned how to organize knowledge into Projects and use Artifacts to iterate on code, documents, and designs in real-time.Prompt Engineering: Developed skills in crafting effective prompts to achieve high-quality, relevant results.AI-Powered Research: Explored techniques for deep-dive research and data synthesis using Claude's expanded context window and specialized modes.Advanced Workflows: Integrated Claude into professional tasks, including document analysis and creative collaboration.",{"id":23,"title":22,"titles":59,"content":60,"level":51},[],"Complete web development certification. Completed a comprehensive web development bootcamp.",{"id":27,"title":26,"titles":62,"content":63,"level":51},[],"Gain hands-on experience with the Google Cloud Natural Language API, Speech-to-Text API, and Text-to-Speech API. Earned the Analyze Speech and Language with Google APIs skill badge by completing the Google Cloud Skills Boost quest. This badge validates the ability to extract technical insights from audio and text using advanced machine learning models. Verify Certificate Key skills validated: Natural Language Processing (NLP): Applied pre-trained models to identify entities and sentiment within text documents.Natural Language API: Utilized Google's cloud-based NLP services to process and analyze unstructured text at scale.Sentiment Analysis: Evaluated the emotional tone of text to derive business intelligence from user feedback and documents.Speech Recognition (Speech-to-Text): Converted spoken audio into text data with high accuracy using powerful neural network models.Speech Synthesis (Text-to-Speech): Generated human-like speech from text input, enabling more natural user interactions.",{"id":65,"title":66,"author":67,"body":71,"date":116,"description":117,"extension":118,"image":119,"meta":120,"minRead":121,"navigation":122,"path":123,"seo":124,"stem":125,"__hash__":126},"blog\u002Fblog\u002Fhow-i-built-my-own-design-system-from-scratch.md","How I Built My Design System from Scratch",{"name":68,"avatar":69},"Pong Keosithong",{"src":70,"alt":68},"\u002FmyImg\u002Fpong.png",{"type":72,"value":73,"toc":112},"minimark",[74,78,81,84,87,103,106,109],[75,76,77],"p",{},"After years of starting each project with a blank Figma file, I finally took the plunge and created my own comprehensive design system. The process was both challenging and incredibly rewarding, and I wanted to share my approach for other designers considering the same journey.",[75,79,80],{},"I started by auditing five of my recent projects, identifying common patterns and components that appeared across different designs. This revealed inconsistencies in my work that I hadn't noticed before—seven slightly different button styles, inconsistent spacing rules, and text styles that varied without clear purpose.",[75,82,83],{},"Rather than creating a rigid system upfront, I built it iteratively through a real client project. For the EcoTrack app, I documented each component as I designed it, creating a living system that evolved with the project's needs.",[75,85,86],{},"The core of my system includes:",[88,89,90,94,97,100],"ul",{},[91,92,93],"li",{},"A flexible color system with semantic naming conventions",[91,95,96],{},"Typography scales based on the golden ratio",[91,98,99],{},"Component variants with clear usage guidelines",[91,101,102],{},"Spacing and layout rules that maintain consistency across devices",[75,104,105],{},"The biggest challenge wasn't technical but psychological—learning to trust the system instead of reinventing solutions for each new problem. But the payoff has been enormous: my design process is now 40% faster, client revisions have decreased significantly, and handoff to development is much smoother.",[75,107,108],{},"If you're considering building your own system, my advice is to start small with core elements, test them on real projects, and document as you go. A good design system should feel like a trusted collaborator, not a set of restrictions.",[75,110,111],{},"I've attached a template of my component documentation method below—feel free to adapt it for your own workflow!",{"title":113,"searchDepth":114,"depth":114,"links":115},"",2,[],"2025-03-05","A practical guide to creating your own design system, from initial audit to implementation, and the lessons learned along the way.","md","https:\u002F\u002Fimages.pexels.com\u002Fphotos\u002F196644\u002Fpexels-photo-196644.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",{},6,true,"\u002Fblog\u002Fhow-i-built-my-own-design-system-from-scratch",{"title":66,"description":117},"blog\u002Fhow-i-built-my-own-design-system-from-scratch","P97JFBCx4xbky2Nvg8irUWEUFnMcwjPKjOLO1p2jMw0",[128,133],{"title":129,"path":130,"stem":131,"description":132,"children":-1},"From Mockup to Market: My End-to-End Product Design Process","\u002Fblog\u002Ffrom-mockup-to-market","blog\u002Ffrom-mockup-to-market","A detailed breakdown of my iterative design methodology, from initial research to final handoff, with practical tips for designers at every stage.",{"title":134,"path":135,"stem":136,"description":137,"children":-1},"The Psychology of Color in UI Design","\u002Fblog\u002Fpsychology-of-color-in-ui-design","blog\u002Fpsychology-of-color-in-ui-design","Exploring how strategic color choices can influence user behavior, evoke emotions, and enhance the overall user experience of digital products.",1778660122460]