Developing pages with AI - Claude Code workflow

I realise this may be a bit niche for some people, especially if you haven’t use Claude Code before, but I have developed an effective workflow for building pages on the portal without having to directly code in HTML \ CSS \ Angular with AI coding assistants and I wanted to share my experience. I hope it is useful.

If you don’t have the experience in web design and software development that the wizards at Huwise have, the code editor can be baffling and frightening. It was for me, and even though I have developed a bit of expertise I am a long way from an expert. Claude Code (also cursor, codex etc) can help. I won’t go into the specifics of using an AI coding agent here, but will describe the steps I took to use Claude to create the page. The skills (guidance docs for Claude) I built are all here - use and adapt as you wish.

1. Install Claude code and buy a subscription (plenty of docs online for this). Use the Opus model.
2. Set up the local dev environment. Give Claude this url and ask it to set up on your machine. You’ll probably need full admin permissions.
3. If you have company branding documents and portal theme css you can give them to Claude and ask it to create a branding skill - I’ve provided mine in the github so you can see what it looks like.
4. Give Claude code a skill like weca-opendata. You can adapt this one. It helps Claude use the Huwise API to introspect datasets efficiently before it builds a page
5. Copy this skill into your ~/.claude/skills folder. It helps Claude understand ODS widgets and the platform’s development environment - how the contexts, filters, widgets and Angular JS templates all wire together.
6. Once you’ve got all this set up, open Claude in your local dev environment folder and give it a prompt based on the page you want to create. Be specific, but not too specific. Here’s one I used. 
7. Use this local dev environment and the /ods-pages skill and build a data driven web page to show data about greenhouse gas emissions from Combined Authorities in England. You can look at the epc-domestic pages in this repo to get inspiration or guidance.

Use the ca_la_ghg_emissions_sub_sector_ods_vw dataset and build a responsive page which allows a user to see key aspects of the dataset and allows the user to see compelling charts about the breakdown of emissions and time series charts. Use the preset facets and make suitable charts and narrative to show the relevant aspects of the data. Use a page - wide filter and design the page so that if a user filters on a higher level category such as Combined Authority, you can then get a breakdown by the lower level category e.g. Local Authority. Same for sector and sub sector.

 You have access to the /weca-opendata skill to introspect the dataset. You should use the /weca-branding skill to ensure the page suits our identity. It would be good to have a map at the bottom which shows the boundaries of the combined authorities and when the user clicks they get the most recent per capita emissions emissions for that authority along with population and area. There is a dataset on the portal that provides these boundaries cauths_weca_as_lep. 

 Make a plan before building and ask me any questions if you are unclear. 
8. Claude will create the page and give you a link on your local machine to see the page before you publish to your portal. If you don’t have the automation API you’ll have to do this manually, i.e. copy and paste the HTML and CSS.
9. You’ll probably need to iterate with Claude to get it looking perfect, but from my experience it was only another 2 or 3 turns.
10. If you’re happy with it, publish by copying and pasting the files in a new code editor window, save, publish etc and do the admin to link it up with the source data, label it etc.
11. At the end of your session you can ask Claude what could have gone better and how to improve the skills so you don’t hit the same issues next time.

Here’s the page I built with the method shown. I didn’t write any of the code myself. In total it’s about 600 lines of code. It took about half an hour and used 20% of a five hour session allocation using Opus 5.5. Obviously the setup in 2 - 4 used up some credit too, but minimal. Enjoy :)