How a Designer Writes Code
By Daria Losminska
I’m a designer at Protovate. My work goes far beyond visuals — it’s about systems, structure, logic, and how users interact with a product. At Protovate, a designer is not “someone who makes things look nice”. A designer is someone who thinks holistically — from idea to implementation.
And at some point, that path naturally led me… to code.
Expanding My Skill Set: My First Website in Pure HTML / CSS / JS
As part of internal team development, I received my first task related to code:
build a website using pure HTML, CSS, and JavaScript.
No builders.
No frameworks.
No shortcuts.
It was my first experience where design stopped being just a mockup and became a real, working interface. That’s when I truly felt how:
- design and code are deeply connected
- design decisions have technical consequences
- understanding code makes a designer stronger
First Challenges: Integrating the Website with Ghost
The real challenge started when the website needed to be integrated with Ghost to power the blog. This is where one important realization became very clear:
👉 without basic technical knowledge, integration cannot be done using AI alone.
Even if AI provides:
- code examples
- file structures
- possible solutions
you still need to understand:
- how HTML structure works
- what Ghost templates are (index.hbs, post.hbs)
- where data logic ends and styling begins
AI can point the way — but you still have to walk the path yourself.
What Had to Be Done
1.Updating the Blog’s Visual Style
The first step was to align the blog with Protovate’s visual identity:
- colors
- typography
- spacing
- post card logic
The blog needed to feel like a natural part of the product, not a separate entity.
2. Restructuring the Main Blog Page and Post Page
Next came structural changes:
- blog homepage
- individual post page
- tags, dates, featured images
This is where a designer starts thinking like a developer:
“Where does this data come from?”
“How is it rendered?”
“What happens if it’s missing?”
3. Local Ghost Environment — The Hardest Part
The most difficult stage was setting up Ghost locally. This required:
- installing Node.js
- working with the CLI
- running Ghost locally
- editing theme files
This is where the limits of AI become very clear. Without basic understanding of: how local servers work, what console errors mean and how project structures are organized - no instruction works “out of the box”.
But something important happened here: AI never discouraged the process — it kept saying you’re doing it right, just keep going.
Step by step, everything started working.
Project Success Through Collaboration with ChatGPT
This project was not “built by AI”. It was built together with ChatGPT. AI helped by:
- identifying errors
- suggesting alternative solutions
- explaining why something wasn’t working
There was a moment when new styles simply wouldn’t apply — and together, step by step, we found the root cause. Most importantly: AI was effective only because I understood what I was doing.
Conclusion
AI will not do the work for you. And without basic knowledge, it won’t be able to do it with you either. But when the foundation is there, AI becomes a powerful partner:
- helping find solutions
- supporting you through challenges
- accelerating learning
- keeping you going when you’re walking a new path almost blindly
For a designer, code is not a betrayal of the profession.
It’s its natural evolution in the age of AI.
Click below to try it yourself or understand what’s happening behind the scenes.
Technical Appendix: Working with Ghost Locally
What’s happening behind the scenes.
Installing Node.js
Ghost runs on Node.js, so first check if it’s installed:
node -v
npm -v
If not — install the LTS version from the official website.
Installing Ghost CLI
Ghost CLI is the main tool for managing a Ghost project.
npm install ghost-cli@latest -g
Verify installation:
ghost --version
Creating a Local Ghost Project
Navigate to your project folder and run:
ghost install local
This command:
- sets up a local server
- configures the database
- runs Ghost in development mode
Ghost will be available at:
http://localhost:2368
Ghost Theme Structure (Designer-Friendly Overview)
Key theme files:
/content/themes/your-theme-name/
├── index.hbs // homepage
├── post.hbs // single post page
├── default.hbs // base layout
├── package.json
├── assets/
│ ├── css/
│ └── js/
👉 .hbs files are templates combining HTML and Ghost logic.
Editing the Theme Locally
After making changes:
- Ghost reloads automatically
- no need to restart the server
If changes don’t appear:
- clear browser cache
- check the console
- confirm the correct theme is active in admin
Common Issues I Faced
1. Styles not applying
- incorrect CSS paths
- browser cache
- editing the wrong theme
2. Ghost won’t start
ghost doctor
This command helps identify configuration issues.
3. Template errors
- a single missing {{ }} can break a page
- console errors are extremely helpful
Why Basic Knowledge Still Matters
AI can suggest commands, explain errors and propose solutions.
But without understanding how servers work, file structure and what exactly you’re changing - integration simply won’t work.
👉 AI amplifies knowledge — it doesn’t replace it.
Originally published on Protovate.AI
Protovate builds practical AI-powered software for complex, real-world environments. Led by Brian Pollack and a global team with more than 30 years of experience, Protovate helps organizations innovate responsibly, improve efficiency, and turn emerging technology into solutions that deliver measurable impact.
Over the decades, the Protovate team has worked with organizations including NASA, Johnson & Johnson, Microsoft, Walmart, Covidien, Singtel, LG, Yahoo, and Lowe’s.
About the Author
Share article
